定位有三种，分别是相对定位 position:relative; 、绝对定位 position:absolute; 、固定定位 position:fixed;

相对定位

相对定位，就是微调元素位置的，让元素相对自己原来的位置，进行位置调整。也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位

不脱标，原来的位置还占着，形影分离

相对定位不脱标，真实位置是在原来位置，只不过影子出去了，可以到处飘。

相对定位用途

相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：

1） 微调元素

2） 做绝对定位的参考，子绝父相

可以用left、right来描述盒子右、左的移动；可以用top、bottom来描述盒子的下、上的移动。

实现上图的方法：

方法1：

position:relative;

top:100px;

left:200px;

方法2：

position:relative;

bottom:-100px;

right:-200px;

方法3：

position:relative;

top:100px;

right:-200px;

方法4：

position:relative;

bottom:-100px;

left:200px;

绝对定位

绝对定位比相对定位更灵活

绝对定位脱标

绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了。

参考点

绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：

如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：

以盒子为参考点

一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。

要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：

    <div class="box1">      →  相对定位

        <div class="box2">  →  没有定位

            <p></p>         → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素

        </div>

    </div>

    <div class="box1">      →  相对定位

        <div class="box2">  → 相对定位

            <p></p>         → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素

        </div>

    </div>

不一定是相对定位，任何定位，都可以作为参考点

<div>  → 绝对定位

        <p></p>  → 绝对定位，将以div作为参考点。因为父亲定位了。

</div>

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。

<div class=”box1”>          → 绝对定位

    <div class=”box2”>      → 相对定位

        <div class=”box3”>  → 没有定位

            <p></p>         → 绝对定位，以box2为参考定位。

        </div>

    </div>

</div>

绝对定位的儿子，无视参考的那个盒子的padding。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{

            margin: ;

            padding: ;

        }

        div{

            width: 200px;

            height: 200px;

            border: 10px solid red;

            padding: 100px;

            padding-top: 150px;

            position: relative;

            margin: 100px;

        }

        p{

            width: 100px;

            height: 100px;

            background-color: orange;

            position: absolute;

            top: 40px;

            left: 40px;

        }

    </style>

</head>

<body>

    <div>

        字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字

        <p></p>

    </div>

</body>

</html>

绝对定位的盒子居中

绝对定位之后，所有标准流的规则，都不适用了。所以 margin: auto; 失效。绝对定位的盒子居中，只需 left:%; margin-left: 负的宽度的一半。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            width: 400px;

            height: 60px;

            background-color: green;

            position: absolute;

            left: %;

            margin-left: -200px;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

固定定位

固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变，固定定位脱标。

z-index

z-index值表示谁压着谁。数值大的压盖住数值小的。

1）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

2） z-index值没有单位，就是一个正整数。默认的z-index值是0。

3） 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

4）父元素的z-index小了，子元素设置的z-index再大也没用。

非原创，纯粹学习笔记

css之定位的更多相关文章

  1. CSS 的定位方式和含义

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

  2. CSS中定位机制的想法

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

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

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

  4. CSS 中定位的使用

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

  5. css的定位机制

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

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

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

  7. CSS之定位布局（position，定位布局技巧）

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

  8. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  9. selenium中CSS选择器定位

    selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...

  10. CSS元素定位

    使用 CSS 选择器定位元素 CSS可以通过元素的id.class.标签(input)这三个常规属性直接定位到,而这三种编写方式,在HTML中编写style的时候,可以进行标识如: #su       ...

随机推荐

  1. Android消息处理机制(Handler、Looper、MessageQueue与Message)

    Android是消息驱动的,实现消息驱动有几个要素: 消息的表示:Message 消息队列:MessageQueue 消息循环,用于循环取出消息进行处理:Looper 消息处理,消息循环从消息队列中取 ...

  2. iOS---扫码

    我在两个项目中分别使用了ZBarSDK与系统自带的扫码,今天主要介绍一下系统自带的扫码. 1.系统自带的 (1)先声明两个属性 @property (nonatomic,strong)AVCaptur ...

  3. Python初学者之网络爬虫

    声明:本文内容和涉及到的代码仅限于个人学习,任何人不得作为商业用途. 本文将介绍我最近在学习Python过程中写的一个爬虫程序,将力争做到不需要有任何Python基础的程序员都能读懂.读者也可以先跳到 ...

  4. 【原】SDWebImage源码阅读（三）

    [原]SDWebImage源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1.SDWebImageDownloader中的downloadImageWithURL 我们 ...

  5. CSS实现图片缩放特效

    今天是感恩节,祝大家感恩节快乐哦!最近天冷了,大家注意保暖哟.下面一起看看小颖写的demo吧. html代码: <!DOCTYPE html> <html> <head& ...

  6. 计算机程序的思维逻辑 (39) - 剖析LinkedList

    上节我们介绍了ArrayList,ArrayList随机访问效率很高,但插入和删除性能比较低,我们提到了同样实现了List接口的LinkedList,它的特点与ArrayList几乎正好相反,本节我们 ...

  7. Oracle迁移:Linux->Windows

    源环境:RHEL6.4 + Oracle 11.2.0.4 目的环境:Windows 2003 需求:研发测试环境的Oracle数据库从Linux迁移到Windows,可以停机. 1.Windows安 ...

  8. go语言赋值

    使用赋值语句可以更新一个变量的值,最简单的赋值语句是将要被赋值的变量放在=的左边,新值的表达式放在=的右边. x = // 命名变量的赋值 *p = true // 通过指针间接赋值 person.n ...

  9. STM32 奇偶校验配置

    void MX_USART2_UART_Init(void){ huart2.Instance = USART2; huart2.Init.BaudRate = 9600; huart2.Init.W ...

  10. js验证输入的是否是数字，小数保留几位小数

    1.验证方法 validationNumber(e, num)  e代表标签对象,num代表保留小数位数 function validationNumber(e, num) { -]+\.?[-]*$ ...