CSS三种定位机制---定位

来源：互联网发布：ssm商城源码编辑：程序博客网时间：2024/06/09 20:09

CSS三种定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

一、普通流

普通流，也叫标准流，是指在不使用其它特殊的规则(如浮动、定位)下，CSS所默认的对html各种元素的排列规则，即元素会自动从左往右，从上往下的流式排列，并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

二、定位

定位主要有相对定位、绝对定位、固定定位、正常定位

absolute（绝对定位）：生成绝对定位的元素，相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定，也可以通过z-index进行层次分级。
（元素框从文档流完全删除，并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。）
relative（相对定位）：生成相对定位的元素，相对于其正常位置进行定位。
如：”left:20” 会向元素的 LEFT 位置左移 20 像素。
（相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。元素框偏移某个距离。元素仍保持其未定位前的形状，仍保留原本所占的空间。）
fixed（固定定位）：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
（元素框的表现类似于将 position 设置为 absolute，不过其包含块是浏览器窗口本身。）
static（正常定位）默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明，即上述声明无效）。
（元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。）

相对定位

相对定位我们主要是要知道相对于谁来进行偏移的？其实相对定位是相对于元素自己的本身的位置，来看一下例子：

<html><head>    <title></title>    <style type="text/css">        html body        {            margin: 0px;            padding: 0px;        }        #parent        {            width: 200px;            height: 200px;            border: solid 5px black;            padding: 0px;            position: relative;            background-color: green;            top: 15px;            left: 15px;        }        #sub1        {            width: 100px;            height: 100px;            background-color: blue;        }        #sub2        {            width: 100px;            height: 100px;            background-color: red;        }    </style></head><body>    <div id="parent">        <div id="sub1">        </div>        <div id="sub2">        </div>    </div></body></html>

运行结果：

这里写图片描述

当我们修改一下Div Sub1 的样式：

 #sub1{    width: 100px;    height: 100px;    background-color: blue;    position: relative;    top: 15px;    left: 15px;}

结果如下图：我们会发现Sub1进行了偏移，并不影响Sub2的位置，同时遮盖住了Sub2，切记偏移并不是相对于 Div Parent的，而是相对于Sub1 原有的位置。

这里写图片描述

绝对定位

为了展示绝对定位，我们在原始代码的基础上，将Div Sub1的样式修改为：

#sub1{    width: 100px;    height: 100px;    background-color: blue;    position: absolute;    top: 15px;    left: 15px;}

结果如下图

这里写图片描述

由于我们对Sub1进行了绝对定位，所以Sub1不存在普通流里了，即我们可以认为Sub1在普通流里的位置消失了，所以同级Div Sub2占据了Sub1的位置，并且偏移后的Sub1遮挡了Sub2。

如果，我们把Sub2 也修改为绝对定位，

#sub2{     width: 100px;     height: 100px;     background-color: red;         position: absolute;     top: 10px;     left: 10px;              }

结果如下图，
这里写图片描述

我们发现Sub2 也进行了偏移，并且遮盖住了Sub1，并且Sub1和Sub2在普通流里都没有了位置。

那么Sub1和Sub2相对于什么元素进行偏移呢？

1、如果Sub1 的父元素或者祖父元素，设置了Position属性，并且属性值为 absolute 或 relative的时候，那么子元素相对于父元素来进行定位。比如我们例子中最外层Div Parent设置了相对定位属性，因此Sub1 和 Sub2 两个Div 就根据 Div Parent 来进行定位。
2、如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象。

例子中的Parent 的Position 属性删除，

这里写图片描述

固定定位

fixed是一种特殊的absolute，按照浏览器的窗口进行定位。

在原始代码的基础上，将Sub2修改为：

#sub2{   width: 100px;   height: 100px;   background-color: red;       position: fixed;   top: 5px;   left: 5px;              }

结果如下图：

这里写图片描述

我们发现Sub2 是以浏览器窗口进行定位，而Sub1则根据父元素进行定位偏移。

正常定位

static 就是Position属性的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

阅读全文

0 0