教育行业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 分享到:
和我们在线交谈!