CSS的四种定位方式详解

编程之家收集整理的这篇文章主要介绍了CSS的四种定位方式详解编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在CSS中定位使用position属性来设置,有以下4种取值:

  1. 静态定位 - static
  2. 相对定位 - relative
  3. 绝对定位 - absolute
  4. 固定定位 - fixed

本文举例所用的材料

三个不同颜色的元素,都设置了同样的大小和左浮动。

本文的例子主要操作B元素。


 

静态定位 - static

静态定位是css中的认定位方式,也就是没有定位,处于正常文档流中。

将B元素设置为静态定位,并设置top和left属性为10px

.B {
	position: static;
	top: 10px;
	left: 10px;
}

效果图如下: 

可以看到B元素没有任何反应,因为认就是静态定位,在此定位方式中设置:top,bottom,left,right,z-index 这些属性都是无效的。


相对定位 - relative

相对定位的相对很有意思,只要搞清楚相对于谁就能理解相对定位的含义。

请看下面的栗子,将B元素设置为相对定位,top和left属性都为0

.B {
	position: relative;
	top: 0;
	left: 0;
}

 效果如下:

B元素没有反应,这是因为相对定位是相对于自身定位,top和left为0就相当于原位不动

再看一个例子,将top和left属性值改为10px

 

可以看到B元素偏移了10px,并且C元素(蓝色)并没有浮到A元素旁边,而是被无形的东西挡住了。

相对定位的特点就是元素本身在文档流中的占位不变,无形的东西就是B元素在文档流中的占位,这也是为什么C元素不会浮动过去的原因。可以想象成B元素的本体依然处于普通文档流中,它的替身在参照本体进行移动。(本体和替身是为了比喻,并不是官方说法)

为了更好理解相对于自身定位,请看下图:

 黑点表示B元素本体的左上角,绿色的是它的替身,可以看出替身是参照B元素本体的左上角那个点进行偏移。(本体就是透明的占位的部分)

将B元素宽度增加效果如下:

可以更明显的看出B元素在普通文档流中占位的痕迹。


绝对定位 - absolute

我在刚开始学习的时候一度被绝对这个词所误导,以为绝对定位是想去哪就去哪。

实际上绝对定位是参考父元素的相对定位来实现的,听起来不好理解,我们先做个最简单的例子。

设置B元素为绝对定位,top和left属性为0

.B {
	position: absolute;
	top: 0;
	left: 0;
}

效果如下:

我们看到元素B被定位到了页面左上角,并且元素B脱离了普通文档流(元素C浮到元素A旁边,没有占位)

那么我们可以认为绝对定位是参照页面左上角进行定位吗?答案是不可以,绝对定位并不是参照页面进行定位,而是参照父元素的relative进行定位,如果元素的所有父元素都没有设置relative,那么将参照根元素html进行定位,这就是B元素跑到了页面左上角的原因。

根据上述说法,假如将B元素设置为relative,再增加一个元素D作为子元素,操作D元素进行绝对定位是不是就会参照父元素B了呢?

在B元素里加入一个子元素D,并设置B元素为相对定位,D元素为绝对定位。(B与D是父子关系)

/* 父元素 */
.B {
	position: relative;
	top: 0;
	left: 0;
}

/* 子元素 */
.D {
	position: absolute;
	top: 10px;
	left: 10px;
}

效果如下:

可以看出我们的结论是对的,紫色的元素D确实是参照父元素B左上角的点进行偏移的。

如果取消B元素的相对定位,那么元素D会跑到页面左上角,也就是参照html元素进行偏移。

我们看看猜测是否正确:

取消B元素的相对定位,D元素不变

/* 父元素 */
.B {
	
}

/* 子元素 */
.D {
	position: absolute;
	top: 10px;
	left: 10px;
}

效果如下:

答案是正确的,元素D的所有父元素都没有设置relative,所以会参照根元素html进行偏移。


固定定位 - fixed

固定定位比较简单,就是根据页面进行偏移,不管如何滑动页面都不会被改变,完全脱离文档流。

设置元素B为固定定位,top和left为50%

.B {
	position: fixed;
	top: 50%;
	left: 50%;
}

效果如下:

固定定位就是参照页面左上角进行偏移,这个没啥好说的。即使页面内容滚动,依然保持不变。常见在博客左右两边的固定元素。

比如这个:

可以看到滚动条快到底了,元素位置依然不变。

小知识:css中的定位的偏移量都是通过参照元素和被参照元素的左上角的点进行偏移,所以50%的偏移量并不是真正意义上的居中,还要减去自身宽度或高度的一半。


z-index属性

z-index属性是设置元素的层级,数值低的会被数值高的遮住,举个栗子:

/* 红色元素 */
.A {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 3;
}

/* 绿色元素 */
.B {
	position: fixed;
	top: 40px;
	left: 40px;
	z-index: 2;
}

/* 蓝色元素 */
.C {
	position: fixed;
	top: 60px;
	left: 60px;
	z-index: 1;
}

效果如下:

可以看到A元素的z-index值最大,所以显示在最前面。B元素(绿色)数值中间,显示夹在中间。C元素(蓝色)数值最小,显示在最后被遮住。


PS:我是第一次写博客文章,文笔不好还请见谅。如有错误,欢迎指出!

另外我这个QQ邮箱小时候被我阴差阳错注册过,然后就没用过了。现在登录CSDN发现显示8年码龄,我人都傻了,要是这样算从我小学6年级就开始写代码了哈哈哈哈,我现在还是个在校大学生呢。

总结

以上是编程之家为你收集整理的CSS的四种定位方式详解全部内容,希望文章能够帮你解决CSS的四种定位方式详解所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

猜你在找的CSS相关文章

常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而
Y(^o^)Y css动画大乱弹之animation。 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border
开发场景中用到display:inline-block;然后呢,div间就有间隙,但是ajax加载出来的数据没有间隙,解决办法如下 display:inline-block表示行内块元素,后面自带空格
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问
html代码是这样的 <div class="arrow-up"> <!--向上的三角--> </div> <div class=&quo
前言 还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。 先来看看这段代码: CSS绘制三角形和箭头,不用再用图片了 CSS绘制
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注