relative：相对定位。
1. 不论其父元素和相邻元素的position是什么，均相对于自身原来的位置来偏移。
2. 不会脱离文档流，其原来的位置依然保留着，不会被文档中其他的元素占用。
3. 原来是行内元素，设置相对定位后，依然是行内元素。
4. 设置了相对定位的块级元素，如果没有设置宽度，其宽度依然是拉伸至父元素宽度的100%。
下面是demo
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

</head>

<style>

    .A {

        background: yellow;

        height: 100PX;

        width: 100PX;

    }

    .B {

        background: red;

        height: 100PX;

        width: 100PX;

        position: relative;

        top: 20PX;

        margin-top: 20PX;

        margin-bottom: 20px;

        /* 相当于以前的位置先向20px;在top原来的位置20px; */

        /* bottom: ; */

    }

    .C {

        background:green;

        height: 100PX;

        width: 100PX;

    }

    span{

       position: relative;

       top: 50px;

    }

    input{

        width: 20px;

        height: 30px;

      }

      span{

         position: relative;

          width: 100px;

          height: 100px;

          background: red;

          /* 行内元素不会影响宽高 */

      }

</style>

<body>

    <!-- 相对定位就是相当于自己以前在标准流中的位置来移动

不会脱离自己的标准流，自己的位置不变 position:relative;

top:20px;

left:20px;

相对定位应用场景

用于对元素进行微调

配合后面的学习的绝对定位来使用

-->

    <div class="A"></div>

    <div class="B"></div>

    <div class="C"></div>

    <input type="text" class="D">

    <span>输入</span>

</body>

</html>

李南江老师视频笔记

absolute：绝对定位。
1. 相对于最近的一个position不为static的父元素来定位，如果没有，则相对于html来定位，注意：此处网上很多资料说是相对于body来定位，下文会进行验证。
2. 设置了绝对定位的行内元素，会转化为块级元素，可以设置宽高。
3. 设置了绝对定位的块级元素，如果没有设置固定宽度，则其宽度不会自动拉伸至父元素的100%，而是由内容和内边距的宽度来决定的。
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>绝对定位</title>

</head>

<style>

    div {

        height: 100px;

        width: 100px;

    }

    .A {

        background: red;

    }

    .B {

        background: green;

        position: absolute;

        /* right: 0; */

        /* /* top: 0; */

        bottom: 0;

        /* 脱离流元素，相对于body的位置 */

    }

    .C {

        background: blue;

    }

    span {

        position: absolute;

        width: 100px;

        height: 100px;

        background: yellow;

        /* 行内元素不会影响宽高 */

    }

</style>

<body>

    <div class="A"></div>

    <div class="B"></div>

    <div class="C"></div>

    <!-- <span>我是span</span> -->

</body>

</html>

 

子绝父相

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

    /* 如果用相对定位则不居中，如果使用绝对定位是按当前屏幕决定位置，会随屏大小移动 */

    *{margin: 0;

      padding: 0;

      }

    ul{

        list-style: none;

        height: 50px;

        width: 700px;

        margin: 0 auto;

        margin-top: 100px;

    }

    ul li{

        float: left;

        text-align: center;

        width: 100px;

        line-height: 50px;

        background: RGB(184,184,184);

    }

    ul li:nth-of-type(4){

        position: relative;

        background: #aad;

    }

    ul li img{

       position: absolute;

       top: -13px;

       left: 42px;

    }

</style>

<body>

    <ul>

        <li>京东时尚</li>

        <li>美妆馆</li>

        <li>超市</li>

        <li>生鲜

            <img src="./images/FAQa.gif" alt="">

        </li>

        <li>闪购</li>

        <li>拍卖</li>

        <li>金融</li>

    </ul>

</body>

</html>
 

css的定位笔记的更多相关文章

  1. CSS揭秘读书笔记 （一）

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  2. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  3. css随堂笔记（三）

    Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 ...

  4. CSS 的定位方式和含义

    CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...

  5. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  6. 转：Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  7. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  8. css的定位机制

    牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...

  9. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

随机推荐

  1. Windows 内核漏洞学习—空指针解引用

    原标题:Windows Kernel Exploitation – NullPointer Dereference 原文地址:https://osandamalith.com/2017/06/22/w ...

  2. 1. Python中如何使用其他语言？（python的胶水作用，python又叫胶水语言）

    1. python中如何插入C语言运行? (1)编写C语言代码: #include<stdio.h> void CFun() { printf("---------我是c语言:- ...

  3. HTML简单登录和注册页面及input标签诠释

    今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标 ...

  4. D04——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D04         20180810内容纲要: 1 内置函数 2 装饰器 3 生成器 4 迭代器 5 软件目录结构规范 6 小结 1 内置函数 内置函数方法详 ...

  5. 使用findbugs为自己的代码review

    转自:http://blog.lichengwu.cn/java/2013/11/24/use-findbugs-code-review/ 介绍 Findbugs是一个代码静态分析工具,用来找出Jav ...

  6. Android自定义View创建流程

    Android的framework提供了很多高质量的view,有时业务需求需要自定义View,其实现流程大致如下: 1.在values/attrs.xml中定义支持的自定义属性,示例如下:

  7. (转)Python标准库：内置函数print(*objects, sep=' ', end='\n', file=sys.stdout, flush=False)

    原文:https://blog.csdn.net/caimouse/article/details/44133241 https://www.cnblogs.com/owasp/p/5372476.h ...

  8. 关于Gen生成try-catch-finally

    例1: class TestExc extends Exception{} void tryItOut () throws TestExc{} void handleExc(Object o){} v ...

  9. Flow类

    JLS参考:https://docs.oracle.com/javase/specs/jls/se7/html/jls-16.html This pass implements dataflow an ...

  10. Python -- Gui编程 -- Qt库的使用 -- 布局与基本控件

    1.垂直布局,水平布局和网格布局 import sys from PyQt4 import QtCore, QtGui class MyWindow(QtGui.QWidget): def __ini ...