css的定位编制有哪些?
2026-07-18 22:49:04栏目:探索
【定位导读】
定位编制+边移位
可以在盒子或是不雅不雅不雅不雅鉴赏器可视区域内逍遥的挪动
可以压住其他的盒子。图片和文字
加定位不须要转化 ,编制可以直接设置宽高,的定位加定位不设置宽高,编制会默许内容宽度
/*定位叠加,后来者居上 ,编制数值越除夜,的定位就越靠上*/
z-index: 1;
1.绝对定位
【定位导读】
元素在挪动职位的时辰,是的定位绝对本来的职位来讲的(自恋型,该元素地址的编制盒子内举办挪动)
跟父亲元素和不雅不雅不雅不雅鉴赏器没有相干。
当然这个盒子走了,的定位他的编制职位延续占据,延续保管 ,的定位不脱标。编制
【定位写法】
position: relative;
top: 300px;
left: 30px;
/*位偏移 top bottom left right*/
2.尽对定位
【定位导读】
元素挪动职位时辰,是绝对祖先元历来讲的 。
假定没有父元素或祖先元素没有定位(浮动也算),就以不雅不雅不雅不雅鉴赏器来对齐的。
假定父亲有定位(绝对、尽对、结实定位),则以比来一级的祖先元素为参考点定位。
他爸爸没有定位,他爷爷有定位 ,他以爷爷来定位。
尽顶定位不占据本来的职位,轮播图采取的尽对定位 。
【子尽父相】
子级独霸尽对定位,父级则需求绝对定位(top :0)
父亲必须保管职位,子盒子不须要保管职位
【定位写法】
position: absolute;
top: 30px;
left: 20px;
/*位偏移 top bottom left right*/3.结实定位
【定位导读】
以不雅不雅不雅不雅鉴赏器的可视窗口来挪动
和父元素有相干
不跟着动弹条而动弹
不占据本来的职位
【结实写法】
position: fixed;
top: 300px;
right: 30px;
/*位偏移 top bottom left right*/
【右边版心写法】
position: fixed;
left: 50%;
margin-left: 450px;
/*再挪动盒子的宽的一半*/
4.粘性定位
【定位导读】
以不雅不雅不雅不雅鉴赏器的可视窗口为参照点 ,挪动元素(结实定位的特点)
粘性定位占据本来的职位(绝对定位的特点)
必须啊添加 top left right bottom 个中一个有效
【粘性定位写法】
position: sticky;
top: 0;
/*部分不雅不雅不雅不雅鉴赏器不兼容,可独霸js来做*/
