06. CSS 定位

一、定位简介（难点）

position	是否占文档流	定位策略
`static`：静态定位	占文档流
`fixed`：固定定位	不占文档流	相对于视窗进行定位
`relative`：相对定位	占文档流原位置	相对于原位置进行边偏移
`absolute`：绝对定位	不占文档流	相对于其已定位的包含块定位

二、固定定位（fixed）

元素的位置相对于浏览器窗口是固定位置。类似于将 position 设置为 absolute，不过其包含块是视窗本身。固定定位使元素的位置与文档流无关，因此不占据空间，固定定位的元素和其他元素重叠。

始终相对整个文档进行定位
IE6不支持固定定位

三、相对定位（relative）★

position:relative

相对于在文档流中的原位置进行边偏移；
仍占据文档流中的原位置；
相对定位元素经常被用来作为绝对定位元素的容器块

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它和其他元素重叠。

四、绝对定位（absolute）★

position:absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于，绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。绝对定位的元素和其他元素也会重叠。

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块（`<html>`）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

① 绝对定位与文档流无关，所以可以覆盖在页面其他元素上；

② 使内嵌支持宽高

③ 块属性标签内容撑开宽度；//自适应

④ 如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移

⑤ 可通过z-index控制堆叠次序；z-index 仅能在定位元素上奏效；

⑥ 一般采取[子绝父相]策略；

<div class = 'box1'>    <!--定位父级  -->
    <div class = 'box2'>    <!--结构父级-->
        <div class = 'box3'></div>  <!--绝对定位元素-->
    </div>
</div>

如果box1,box2都有 position:relative, box2就会变成box3的定位父级（往上找，找到第一个有相对定位的父级）

五、堆叠顺序（z-index）

因为元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过 z-index 属性控制这些元素的堆放次序。

z-index 属性用于指定一个元素的堆叠顺序，即哪个元素应该放在前面，或后面。一个元素可以有正数或负数的堆叠顺序，默认值为 auto 堆叠顺序与父元素相等。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。

注意：如果两个定位元素重叠，没有指定z-index，最后定位在 HTML 代码中的元素将被显示在最前面。该属性只能用于定位元素，且无继承。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0;margin:0;}
#box1{
    width:500px;
    height:100px;
    background:blue;
    position:relative;
    z-index:100;
}
#box2{
    width:800px;
    height:200px;
    background:red;
    position:absolute;
    top:20px;
    left:50px;
}
#box3{
    width:1000px;
    height:300px;
    background:green;
    position:absolute;
    top:40px;
    left:100px;
    z-index:-1;
}
</style>
</head>
<body>
<div id="box1">1
</div>
<div id="box2">2
</div>
<div id="box3">3
</div>
</body>
</html>

解析：默认的堆叠顺序是 box1 在最底层，下来是 box2，box3 显示在最上层。给 box3 设置为 z-index:-1;，那么 box3 会显示在最底层，下来是 box1，box2 会显示在最上层。再给 box1 设置 z-index:100;，最终 box1 显示在最上层，下来是 box2，box3 被显示在最底层。

六、固定层效果

固定层效果是固定定位的应用，这种效果在网站中也很常见，比如在页面顶部固定导航栏菜单，当页面滚动时，内容从导航栏菜单下面穿过，或者侧边栏固定在页面右底部。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>固定层效果</title>
<style>
*{padding:0;margin:0;}
body{
    background:#EEEEE0;
}
#header{
    width:100%;
    height:50px;
    background:#99CC33;
    position:fixed;
    top:0;
    left:0;
}
#conten{
    width:80%;
    height:1000px;
    border:1px solid black;
    margin:0 auto;
    margin-top:70px;
}
#conten .main{
    width:200px;
    height:400px;
    background:yellow;
}
#sidebar{
    width:80px;
    height:80px;
    background:green;
    position:fixed;
    right:0;
    bottom:0;
}
#footer{
    width:100%;
    background:#cdcdc1;
    text-align:center;
    margin-top:20px;
    padding:20px 0;
}
</style>
</head>
<body>
<div id="header">
    <h2>网站头部</h2>
</div>
<div id="conten">
    <div class="main">
        <h2>内容</h2>
    </div>
</div>
<div id="sidebar">
    <h2>侧边栏</h2>
</div>
<div id="footer">
    <h2>页脚</h2>
</div>
</body>
</html>

position 三种形式定位的影响因素：属性的取值、元素的偏移量和元素偏移的参考基准。

absolute 与 fixed 相同点都是完全脱离文档流，未设置偏移量时都定位在父元素的左上角。元素设置定位后就具备偏移属性和堆叠属性，只有元素在设置相对定位，或者绝对定位后，堆叠属性才有效，它的作用是设置元素所在的 z 轴层级。z-index值越大，元素层级越大。
他们的不同点是设置偏移时，偏移的参考基准，absolute 无已定位祖先元素时，以为基准偏移；有已经定位的祖先元素时，以距其最近的已定位元素为基准偏移，通常设置了 relative 的元素常被用来做 absolute 元素的容器块。fixed 有、无已定位祖先元素，都已浏览器可视窗口为基准偏移。
他们还存在表现形式的差异，即滚动条，absolute 的位置会随滚动条变化，而 fixed 的位置是固定不变的，不会随滚动条变化，兄弟元素可以从其下穿过。
fixed 的定位形式也属于绝对对位，但不同于 absolute，fixed 的位置固定不变，未设置偏移量时，有已定位的祖先元素，以祖先元素为基准定位；无已定位祖先元素时，以浏览器窗口为基准定位。设置偏移量后，有无已定位祖先元素，均以浏览器窗口定位。

七、定位的兼容问题、清浮动方法

相对定位：

在 IE6 下父级的 overflow:hidden; 包不住子级的relative; // 让父级也变成定位元素就可以。

绝对定位：

在 IE6 下定位元素的父级宽高都为奇数（尽量使用偶数）那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
绝对定位元素子级的浮动可以不用写清浮动方法；（绝对定位本身就可以清浮动）

固定定位：

固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）

posted @ 2019-07-16 12:46 胤小飞阅读(192) 评论(0) 收藏举报

刷新页面返回顶部

胤小飞的前端之路