CSS 布局_3 Position元素定位

Unsplash

1. position 属性

position 属性,设置元素位置

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

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

注释:IE6 不支持该属性,IE7 开始支持

描述

static

默认值,没有定位,元素使用正常的布局行为,即元素在文档流中当前的布局位置

relative

生成相对定位的元素,相对于其正常位置进行定位,因此,"left:20px;" 会向元素的 left 位置添加 20 像素

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位

fixed

生成固定定位的元素,相对于浏览器窗口进行定位

注释:left / right 同时出现,left 值生效,right 值无效;top / bottom 同时出现,top 值生效,bottom 值无效

2. position:relative 相对定位

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

.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 属性进行规定,偏移时不会影响文档流中的任何元素

3. position:absolute 绝对定位

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

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

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% 宽度了,在没有设置宽度的情况下,都是由内容来撑开宽度,在大多数时候,绝对定位元素的 heightwidth 属性的值为 auto,它们会自动计算以适合元素的内容

4. position:fix 固定定位

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

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:absoluteposition:fix; 属性的元素,都脱离了文档流,即不会占据当前层的空间位置,而是来到了上一层,并且会覆盖下层的元素,如果下层元素不想被覆盖,可以通过设置 z-index 属性来改变该元素的层叠级别

5. Z-index 堆叠顺序

Z-index

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

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

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

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

运行结果

#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>

运行结果 1

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

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

运行结果 2

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

6. 底部显示栏

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

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>

运行结果

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏V站

CSS3实现鼠标移动图片上图片变大(缓慢变大,放大过程有动画过渡,过渡时间可自定义)

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果...

2274
来自专栏柠檬先生

jquery mobile 移动web(2)

button 按钮   data-role="button" 将超链接变成button。   具有icon 图标的button 组件...

1975
来自专栏河湾欢儿的专栏

表格

表格标签: table 表格 thead 表格头 tbody 表格主体 tr 表格行 th 元素定义表头 td 元素定义表格单元

771
来自专栏林德熙的博客

win10 UWP 动画 动画入门

在 UWP 移动元素的动画,可以使用 RenderTransform 移动,然后使用动画修改 RenderTransform 进行动画。关于元素移动,请看 wi...

2231
来自专栏偏前端工程师的驿站

当css属性width设为100%时

  平常在写页面html代码时,经常会使用到width:100%来使控件宽度为父控件的内容宽度。但如果父控件为body,而且没有明确设置body的宽度,那么就会...

2165
来自专栏互联网杂技

关于css

常用的选择器:标签选择器,id选择器,class选择器,伪类选择器。 但是还有一个功能强大的选择器:属性选择器, 属性选择器,这样使用, 1、[属性名]{st...

3507
来自专栏十月梦想

HTML表格

            4.cellspacing:外边距(单元格和单元格之间的距离)

2912
来自专栏柠檬先生

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

18710
来自专栏小樱的经验随笔

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从...

3428
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何快速实现按钮组功能

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

1124

扫码关注云+社区