CSS 布局_3 Position元素定位

position 属性

position 属性，设置元素位置

我们之前已经介绍过行元素，块元素及行内块元素的属性了，能够知道它们是具有自己默认的显示方式的，即元素会按照文档流 (document flow) 的方式，自上而下，从左到右进行布局，如果你想要改变元素默认的定位行为，就需要设置 position 属性了

该属性定义建立元素布局所用的定位机制，任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型，相对定位元素会相对于它在正常流中的默认位置偏移

注释：IE6 不支持该属性，IE7 开始支持

值	描述
static	默认值，没有定位，元素使用正常的布局行为，即元素在文档流中当前的布局位置
relative	生成相对定位的元素，相对于其正常位置进行定位，因此，"left:20px;" 会向元素的 left 位置添加 20 像素
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
fixed	生成固定定位的元素，相对于浏览器窗口进行定位

注释：left / right 同时出现，left 值生效，right 值无效；top / bottom 同时出现，top 值生效，bottom 值无效

position:relative 相对定位

position:relative; 相对定位，即相对元素的正常位置

代码语言：javascript复制

.left {
  position: relative;
  left: -20px;
  background-color: lightblue;
}
.right {
  position: relative;
  left: 20px;
  background-color: khaki;
}

<div style="background-color:coral;">这是处于正常位置的Nian糕</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="left">这是相对其正常位置向左移动 20 个像素的Nian糕</div>
<div class="right">这是相对其正常位置向右移动 20 个像素的Nian糕</div>

从运行结果可以知道，向左移动的元素已经超出了浏览器窗口的显示范围了，定位元素所在的位置需要通过 left,top,right 以及 bottom 属性进行规定，偏移时不会影响文档流中的任何元素

position:absolute 绝对定位

position:absolute; 绝对定位，相对定位父级而定位，即父级元素或祖先元素 position 不为默认值 static，就是定位父级，如果没有设置该属性的祖先元素，则一直回溯到 body 元素，元素的偏移位置不影响文档流中的任何元素，其 margin 不与其他任何 margin 折叠

元素设置 position:absolute; 绝对定位之后，脱离文档流，不占据文档流的空间位置，不会影响其他元素的布局

代码语言：javascript复制

div {
  position:absolute;
  left:100px;
  top: 40px;
  background-color: lightblue;
}
span {
  position: absolute;
  left: 10px;
  top: 20px;
  width: 60px;
  height: 80px;
  background-color: khaki;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div>
  这是一个绝对定位的Nian糕
  <span>Nian糕</span>
</div>

从运行结果可以知道，设置 position:absolute 属性后，行元素也可以设置宽高，而块元素不再具有默认 100% 宽度了，在没有设置宽度的情况下，都是由内容来撑开宽度，在大多数时候，绝对定位元素的 height 和 width 属性的值为 auto，它们会自动计算以适合元素的内容

position:fixed 固定定位

position:fixed; 固定定位，相对浏览器窗口定位，当页面出现滚动条时，定位元素不会随着滚动，同样的，元素设置 position:fixed; 固定定位之后，行元素可以设置宽高，块元素宽度由 100% 变为 auto，脱离文档流，不占据文档流的空间位置，不会影响其他元素的布局

代码语言：javascript复制

body {
  background-color: coral;
  height: 2000px;
}
a {
  position: fixed;
  right: 100px;
  bottom: 100px;
  height: 50px;
  width: 40px;
  background-color: khaki;
}
p {
  color: lightblue;
}

<body id="body">
  <a href="#body">返回顶部</a>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta natus quod illo modi, at fugit, facilis deleniti doloremque autem reprehenderit eos quae nesciunt, esse iure! Minima, quaerat illo hic odit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed modi, dignissimos magnam fugiat natus maiores ipsa, doloremque veritatis cum earum a sunt, neque aliquam atque provident facere est necessitatibus mollitia!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi laborum reprehenderit ratione iste, aperiam fugit qui, officia nesciunt fugiat voluptas? Ipsam reiciendis maiores, nisi? Neque, quis autem ratione repellendus!
  </p>
</body>

设置了 position: relative 的元素依然在文档流中，依旧占据空间位置，只不过可以通过设置 left,right 等属性来移动元素，这种移动是会影响其他元素的位置的，但是，设置了 position:absolute 和 position:fix; 属性的元素，都脱离了文档流，即不会占据当前层的空间位置，而是来到了上一层，并且会覆盖下层的元素，如果下层元素不想被覆盖，可以通过设置 z-index 属性来改变该元素的层叠级别

Z-index 堆叠顺序

图片来源：http://www.osmn00.com/translation/201.html

这里 X 轴和 Y 轴定义的是在页面上的位置，而 Z 轴定义的是层叠的层次，z-index 的默认值为 0 ，元素的 z-index 属性值越高，就意味着该元素在层叠顺序中更靠近顶部，如果两个元素在 XY 平面上有重叠，那么z-index 属性值大的元素会覆盖属性值更小的元素

代码语言：javascript复制

.pic {
  position:absolute;
  height: 150px;
  width: 150px;
  left:0px;
  top:0px;
  z-index:-1
}

<img url="img/">
<p style="color: coral;">Nian糕爱吃鸡腿，还爱吃糖醋排骨</p>

代码语言：javascript复制

#box1 {
  width: 150px;
  height: 150px;
  background-color: coral;
  position: relative;
  top: 16px;
  left: 80px;
}
#box2 {
  width: 150px;
  height: 150px;
  background-color: lightblue;
  position: relative;
}
.text1 {
  position: absolute;
  width: 80px;
  height: 60px;
  top: 110px;
  left: 10px;
  background-color: khaki;
  z-index: 4;
}
.text2 {
  position: absolute;
  width: 80px;
  height: 60px;
  top: 10px;
  left: 30px;
  background-color: pink;
  z-index: 3;
}

<div id="box1">
  <p class="text1">Nian糕爱吃鸡腿</p>
</div>
<div id="box2">
  <p class="text2">Nian糕爱吃糖醋排骨</p>
</div>

z-index 层级比较，先比较当前元素的 z-index 属性值，属性值大的层级就高，就会显示在上层，但是如果它们拥有父级，且父级为兄弟元素，那还要比较父级元素的 z-index 属性值，在这个例子当中，它们各自的父级未设置 z-index 属性值，故使用默认值 0，接下来我们修改相比较元素的父级 z-index 属性值，看下会有什么变化

代码语言：javascript复制

#box1 {
  z-index: 1;
}
#box2 {
  z-index: 2;
}

虽然 “Nian糕爱吃鸡腿” 的 z-index 属性值是最大的，但是它的父级的 z-index 属性值却是为 1，比 “Nian糕爱吃糖醋排骨” 父级的 z-index 属性值 2 要小，所以，父级 z-index 属性值大的会显示在上层

底部显示栏

接下来的一个例子，来教你如何设置底部显示栏，这在移动端是经常使用到的，至于如何引用字体图标，可以参考我这篇博文 CSS 样式重置里的介绍

代码语言：javascript复制

body {
  margin: 0;
  height: 2000px;
}
#main {
  text-align: center;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: inline-block;
  display: flex;
}
#main div {
  border: 1px solid red;
  flex:1;
}
.iconfont {
  font-size: 50px;
}

<div id="main">
  <div><i class="iconfont icon-shouye"></i><br>首页</div>
  <div><i class="iconfont icon-jushoucang"></i><br>聚收藏</div>
  <div><i class="iconfont icon-gouwuche"></i><br>购物车</div>
  <div><i class="iconfont icon-wodejuhuasuan"></i><br>我的聚划算</div>
  <div><i class="iconfont icon-erweima"></i><br>二维码</div>
</div>

css3

0 人点赞