于之前的我而言,对position属性就是那种我知道有这个属性,但是具体怎么用,我不知道,就随便用呗,但是,但是,这种思想是非常不对的❗❗❗❗❗为痛改前非,狠心学习,终得这篇博文的问世,欢迎关注、交流🉑🉑🉑🉑🉑
录子
position属性概述
该属性用于指定一个元素在文档中的定位方式,这个属性有static、absoulte、relative、fixed这四个关键字,别急,且让我们一扒究竟,先来点总结:
首先,感谢这位博主做的总结:(别问,问就是懒🤬)
首先基本了解下position的各个属性值:
1、static:默认值。没有定位,元素在正常显示出现(它将忽略top、bottom、left、right、z-index声明)
2、relative:生成相对定位的元素,相对于其正常位置进行移动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
3、absolute:生成绝对定位的元素,相对于position属性定义为static之外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
🧐原文链接:https://blog.csdn.net/madman0621/article/details/82431621
position之static
可能这个关键字大家用的不多,但是也要说一下💨
该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
是的,这些属性,上面提到的什么top,left都没有用!
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>致命布局问题</title>
<style type="text/css">
#static{
width: 300px;
height: 300px;
background: pink;
position: static;
}
</style>
</head>
<body>
<div id="static"></div>
</body>
</html>
然后我现在在它的上方我添加一行字:
大家可以看到,static元素也会跟着向下移动了,最后说一次这个属性对 top, right, bottom, left 和 z-index 属性无效。
是否会重叠?
如果说我现在使用两个呢?
可以看到,没有重叠,因为新添加的东西,和上面的p标签“一样”,属于外来物,就给“它”腾出位置来就好了💫
position之absolute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>致命布局问题</title>
<style type="text/css">
#absolute{
width: 300px;
height: 300px;
background: cadetblue;
position: absolute;
top: 100px;
left: 40px;
}
</style>
</head>
<body>
<div id="absolute"></div>
</body>
</html>
这个属性移动的标准默认就是依据目前文档的边边来移动😃
现在我同样在它上方添加文字,为了对比明显,我添加很多行,大家看看效果:
这其实和“文档流”有关,什么是文档流?
文档流
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
继续回到刚刚的问题,这个关键字其实就是:元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
重叠问题
使用这个属性就像是“脱离”了文档流,那么就极有可能会重叠,因为你已经不在原本的文档流里了,你是“自由的”个体,你想干嘛你就干嘛:
再精确一点点,我把其中的一个absolute添加另一个的里面:
<div id="absolute">
<div id="absolute"></div>
</div>
效果:
可以看出,先前的两个元素的的确确是重叠了的
position之relative
这个关键字和static很像,只不过它添加了几个与static不同的属性而已
该关键字生成相对定位的元素,相对于其正常位置进行移动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定,这就是其中一点与static不同的地方,另外一点就是与absolute的“结合”,上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>致命布局问题</title>
<style type="text/css">
#relative{
width: 800px;
height: 800px;
background: black;
position: relative;
top: 100px;
left: 100px;
}
#absolute{
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 100px;
left: 40px;
}
</style>
</head>
<body>
<div id="relative">
<div id="absolute"></div>
</div>
</body>
</html>
可以看到,absolute没有根据“边边”来移动了,而是根据relative的“边边”来移动,现在将relative换成static,看看区别:
可以看到,absolute元素完全无视了static元素,明明absolute元素是包在了static里面,但是,可以发现,absolute根本就不管,还是保持在自己原本的位置上
这也就是relative和static的区别之二,也是最重要的区别😎,absolute会根据relative去定位
position之fixed
fixed和absolute很像----注意他也会重叠噢
元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时,容器由视口改为该祖先。
前面的蓝色部分大家应该都是可以自己理解,实在不理解的,你们上手试试就行,至于后面的部分才是重点,这句话的意思就是
如果说你在定义了fixed的前提下,并且是包裹在relative里面,你不定义类似top/left/bottom等,那么fixed就类似absolute一样,位置会根据relative来变,一旦你设置了top/left/bottom等,那么fixed就会跳出relative,根据body去定位,而不是根据relative!脱离了relative的束缚🐱🏍
position之sticky(补充内容)
敬请期待啦哈哈哈哈下期见