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. Kafka参数配置详解

    配置参数 参数说明 broker.id =1  每一个broker在集群中的唯一标示,要求是正数.当该服务器的IP地址发生改变时,如果broker.id没有变化,则不会影响consumers的消息情况 ...

  2. 怎么在eclipse中访问webservice

    在eclipse创建webservice的方法: 1.在Eclipse的菜单栏中,Window --> Preferences --> Web Service --> Axis2 P ...

  3. express+nodemon 修改后浏览器自动刷新

    添加nodemon模块 cnpm install --save nodemon 根目录添加文件 nodemon.json { "restartable": "rs&quo ...

  4. 03——Solr学习之Solr的使用(不会用)

    1.先放上次在linux搭建成功的solr管理UI界面 2.有个很蛋疼的问题我就要吐槽一下了 由于没接触过solr这玩意,在百度上一顿操作搜索怎么用,怎么导入数据,建索引库什么的,看了一大片别人的博客 ...

  5. HBase 安装设置

    一.安装环境 1. JDK:jdk-7u79-linux-x64.tar.gz 2. HBase:hbase-0.98.13-hadoop1-bin.tar.gz 3. Hadoop:hadoop-1 ...

  6. KBEngine 安装

    其实这篇的内容官方文档都有, 但是既然打算记录一下学习笔记, 也就先从安装开始了. 一 下载源代码 进入github下载最新release的源码压缩包. windows选择zip, 下载完成之后右键解 ...

  7. centos 6.8 解决ibus输入法不正常显示的问题

    今天发现 ibus输入法打字时不正常显示,如下图

  8. spring boot和mybatis集成分页插件

    MyBatis提供了拦截器接口,我们可以实现自己的拦截器,将其作为一个plugin装入到SqlSessionFactory中. 首先要说的是,Spring在依赖注入bean的时候,会把所有实现MyBa ...

  9. 【jQuery源码】tokenize方法

    //得到由选择器生成的token对象的数组(下面的groups) //Sizzle的Token格式如下 :{value:'匹配到的字符串', type:'对应的Token类型', matches:'正 ...

  10. Chapter 3 Phenomenon——14

    They wheeled me away then, to X-ray my head. 他们把我移到了一边用X光照射我的头. 他们把我放到轮椅上,推着我去做头部X光检查. I told them t ...