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. GitHub项目加入Travis-CI的自动集成

    Travis-CI是为github量身打造的自动集成环境,如果我们的项目托管在github上,可以十分方便的使用Travis-CI做自动集成. 使用Travis-CI十分的简单,首先打开Travis- ...

  2. easyui页面上字段排序并与后台交互

    在开始对easyui里面页面上进行排序,感觉应该不怎么难,但是在操作的时候并没有那么简单,上网也查了很多进行排序的方法,最终总结出这个方法,供大家参考使用: 一.在easyui里面上只需 1.将要进行 ...

  3. Python小白学习之路（十三）—【递归调用】

    一.递归调用定义 在函数内部,可以调用其他函数. 如果在调用一个函数的过程中直接或间接调用自身本身,则称为递归调用 从某种意义上来说,递归调用可以实现无限循环 二.递归调用的特性 必须有一个明确的结束 ...

  4. easyUI的分页，只显示第X 共Y页。改为显示 第X 页 共Y页

    如下图,easyUI的分页,只显示第X 共Y页. 需求需要显示 第X 页 共Y页. 解决办法:在easyui-lang-zh_CN.js更改以下代码,即可.也就是在 “共{pages}页”前面加个 “ ...

  5. SAS->关联分析实践

    SAS系统被誉为国际上的标准软件系统,本文将详细介绍如何在SAS/EM模块中进行关联规则数据挖掘,使用的软件版本是SAS 9.1.3下的Enterprise Miner 4.3: 从SAS顶端的[解决 ...

  6. Hadoop集群维护

    HDFS小文件问题及解决方案:http://dongxicheng.org/mapreduce/hdfs-small-files-solution/ Hadoop升级方案(一):Hadoop 1.0内 ...

  7. Restore HBase Data

    方法 1: Restoring HBase data by importing dump files from HDFS The HBase Import utility is used to loa ...

  8. ASP.NET：EntityFramework实现Session

    ASP.NET默认的InProc模式的Session既浪费内存又在网站重启时存在数据丢失问题,SQLServer模式的Session只支持SQL Server又需要命令行配置.使用EntityFram ...

  9. 极光推送android sdk集成步骤

    推送,用极光,大家都说好,哈哈. 进入正题: 1.确认android studio的 Project 根目录的主 gradle 中配置了jcenter支持.(基本上现在都已经支持了,循例说一下)  , ...

  10. OpenGL12-shader(GLSL)着色语言4-广告版的实现

    之前介绍了vertex shader的基本原理,现在我们来做一个简单的实践,在游戏中广告版(布告版) 随处可见,而且效率很高,现在我们就使用shader来实现这一过程,首先我们要知道布告版的原理 实际 ...