乐鱼电竞

教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

position的属性值有哪些？分别有哪些作用？

更新时间:2021年09月24日16时25分 来源:乐鱼电竞 浏览次数:

好口碑IT培训

position的属性值有哪些？分别有哪些作用？

1.static：默认值

静态定位是元素的默认定位方式，即无定位的意思，不脱离文档流，top，right，bottom，left等属性不生效，静态定位在布局时我们几乎不用。


2.相对定位：relative

参照物：元素本身偏移前位置

注：设置了相对定位，左右margin为auto仍然有效，原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。并且不会脱离文档流。


3.绝对定位：absolute

绝对定位是元素以带有定位的父级元素来移动位置，要成为绝对定位元素的参照物必须满足以下两个条件：

·参照物和绝对定位元素必须是包含与被包含关系;

·该参照物必须具有定位属性;

如果找不到满足以上两个条件的父包含块，那么相对于浏览器窗口进行定位

注：设置了position: absolute;属性后，元素会脱离正常文档流，不在占据空间;左右margin为auto将会失效;我们通过left、top、bottom、right来决定元素位置


4.固定定位：fixed

参照物：浏览器窗口;

注：固定定位会脱离文档流;当绝对定位和固定定位参照物都是浏览器窗口时的区别： 当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动。



猜你喜欢：

css定位详解：css中定位类型

什么是CSS浮动?有什么作用？

如何用css画圆?

CSS3如何设置颜色不透明度？

乐鱼电竞HTML&JS+前端高手班

0 分享到：
和我们在线交谈！
【网站地图】【sitemap】