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 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

表格

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

971
来自专栏十月梦想

css的position定位详解

iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

893
来自专栏林德熙的博客

win10 UWP 动画 动画入门

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

2601
来自专栏.Net移动开发

.NET(C#、VB)移动开发——Smobiler平台控件介绍:TextTabBar控件

获得和设置标签栏单元集合,打开集合编辑器,并点击“添加”,分别填写Text(菜单项文本),Value(内部值,不在界面上显示),如图 7、图 8;

1452
来自专栏互联网杂技

关于css

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

3557
来自专栏柠檬先生

jquery 层级选择器

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

19310
来自专栏菜鸟计划

CSS布局(五) 网页布局方式

网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。 三种关系:相邻,嵌套,重叠。 下面介绍网页布局的常用几种方式 ? 1.一列布局: 一般都是固定的宽高...

3986
来自专栏一个爱吃西瓜的程序员

Web前端基础【1】--HTML基础

HTML不是编程语言,是一种表现网页信息的符号标记语言。标记语言是一套标记,HTML使用标记来描述网页。Web浏览器的作用就是读取HTML文档,并以网页的形式显...

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

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

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

3458
来自专栏.Net移动开发

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

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

1324

扫码关注云+社区

领取腾讯云代金券