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. dos新建文件夹 新建文件

    https://jingyan.baidu.com/article/49ad8bceb0237f5834d8fa19.html 新建文件夹: mkdir kkk 新建kkk文件夹 新建文件: type ...

  2. react native 学习之 native modules

    翻译自https://facebook.github.io/react-native/docs/native-modules-ios.html Native Modules 很多情况下,app需要使用 ...

  3. spring3.2+mybatis3.2+maven整合

    用maven管理spring+mybatis的项目: 这里主要讲述的是maven中的pom.xml文件的配置,以及在maven构建过程中会碰到的几个问题(我用的是maven4.4的版本): 首先一步一 ...

  4. cobbler 自定义私有yum源

    目的:为客户端自动添加上yum源 以下以openstack源为例 1.新建私有yum源[root@localhost ~]#cobbler repo add --name=openstack-mita ...

  5. MySQL多源复制(八)

    一.什么是多源复制 MySQL 5.7发布后,在复制方面有了很大的改进和提升.比如开始支持多源复制(multi-source)以及真正的支持多线程复制了.多源复制可以使用基于二进制日志的复制或者基于事 ...

  6. Machine learning 第8周编程作业 K-means and PCA

    1.findClosestCentroids function idx = findClosestCentroids(X, centroids) %FINDCLOSESTCENTROIDS compu ...

  7. error "Can only specify query options (orderby, where, take, skip) after last navigation" when fetching a List<string>

    Question I use OData v3 and WCF in visual studio 2012. I want to return List<string> using the ...

  8. Sharepoint Timer job问题汇总

    解决方案发布最好发布到GAC中,使用WebApplication很多时候会有问题.TimerJob并非是在IIS下运行,所以发布到wss目录下的dll不能使用. 如果解决方案中只有一个Timer Jo ...

  9. nginx 学习笔记(4) Connection处理方法

    nginx支持connection的多种处理方法.nginx运行的平台确定了可用的处理方法. 在特定平台下connection的多种处理方法中,nginx会自动选择一种最有效的方法.然而,如果需要,你 ...

  10. MyEclipse2014破解方法

    之前一直使用的MyEclipse2014过期了,无奈之下只能在网上搜怎么破解,结果很管用,在这里记录并和大家分享 https://jingyan.baidu.com/article/fdbd42771 ...