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. python爬虫3——获取审查元素(板野友美吧图片下载)

    测试环境:python2.7 + beautifulsoup4.4.1 + selenium2.48.0 测试网址:http://tieba.baidu.com/p/2827883128 目的是下载该 ...

  2. 导数、多元函数、梯度、链式法则及 BP 神经网络

    一元函数的导数 对于函数\(y=f(x)\),导数可记做\(f'(x_0)\).\(y'|x=x_0\)或\(\frac{dy}{dx}|x=x_0 \).定义如下: \[f'(x_0) = \lim ...

  3. 了解ORACLE培训OCA-OCP-OCM课程表

    了解ORACLE培训OCA-OCP-OCM课程表考试号: OCA    1Z0-007$125    Oracle Database 10g:SQL Fundamentals 本课程培养学生必要的SQ ...

  4. java基本语法二

    1 运算符 1.1 运算符的概念 运算符是一种特殊的符号,用以表示数据的运算.赋值和比较等. 在java语言中,运算符有如下的分类: ①算术运算符. ②赋值运算符. ③比较运算符(关系运算符). ④逻 ...

  5. 使用TopShelf做windows服务

    class Program { static void Main(string[] args) { HostFactory.Run(x => { x.RunAsLocalSystem(); x. ...

  6. (转)python学习笔记4--数字类型与操作符

    原文:https://blog.csdn.net/lemonwyc/article/details/37558269 1. 同时赋值(Simultaneous Assignments) python支 ...

  7. (转)AIX rootvg 镜像创建与磁盘更换

    # prtconf | grep disk # chdev -l hdisk1 -a pv=yes # extendvg rootvg hdisk1 # chvg -Qn rootvg # lsvg ...

  8. 常用chrome插件&&常用FireFox插件

    第一部分:chrome插件 chrome中输入  chrome://chrome-urls/   可以得到包括缓存在内的很多相关信息. 1.掘金chrome插件 点击下载 掘金是一个高质量的互联网技术 ...

  9. Java之IO(十一)BufferedReader和BufferedWriter

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7074488.html 1.前言 按照字节流的顺序一样,字符流也提供了缓冲字符流,与字节流不同,Java虽然提供了 ...

  10. Go语言学习笔记九： 指针

    Go语言学习笔记九: 指针 指针的概念是当时学C语言时了解的.Go语言的指针感觉与C语言的没啥不同. 指针定义与使用 指针变量是保存内存地址的变量.其他变量保存的是数值,而指针变量保存的是内存地址.这 ...