定位有三种，分别是相对定位 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. 适合WebApi的简单的C#状态机实现

    目标 采用了Restful WebApi的架构,再把业务逻辑状态转移放到后端就有点违背初衷了.实际上只要后端Api的权限设置的好,把状态转移放到前端也未尝不可.我考虑的结果是,一般如果变更这个状态本身 ...

  2. ABP(现代ASP.NET样板开发框架)系列之1、ABP总体介绍

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之1.ABP总体介绍 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  3. git 常见命令解析

    转载自http://www.rainkong.net/post/git-image.html 之前用的都是svn ,git还是要了解的,万一哪天要用了呢

  4. C# 开发windows服务的一些心得

    最近在做一个windows服务的项目,发现并解决了一些问题,拿出来和大家分享一下,以下windows服务简称“服务” 文章会在适合时间更新,因为朋友们在不断提出新的意见或思路,感谢-.- 1.服务如何 ...

  5. PHP 调用webService方式

    方法如下: <?php header('Content-Type: text/html; charset=UTF-8'); define('APP_ROOT', dirname(__FILE__ ...

  6. Windows 10 安装SVN 不显示状态图标--解决方法

    升级win10以后,什么都正常,就是svn版本库图标不见了,图标的显示有助于我们定位代码的修改及提交情况,该怎么办呢? 下面分享详细的解决办法亲测有用: 其实也比较简单, 在注册表中找到此项: HKE ...

  7. 【java】细说 JAVA中 标注 注解（annotation）

    Java注解是附加在代码中的一些元信息,用于一些工具在编译.运行时进行解析和使用,起到说明.配置的功能.注解不会也不能影响代码的实际逻辑,仅仅起到辅助性的作用 下面我们来详细说说这个注解,到底是怎么一 ...

  8. Android动画效果之Frame Animation（逐帧动画）

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

  9. angular2系列教程（三）components

    今天,我们要讲的是angualr2的components. 例子

  10. 以实际的WebGIS例子探讨Nginx的简单配置

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 以实际项目中的一个例子来详细讲解Nginx中的一般配置,其中涉 ...