深空之眼历战轮回10

css的定位编制有哪些?

2026-07-18 22:49:04栏目:探索

【定位导读】

  1. 定位编制+边移位

  2. 可以在盒子或是不雅不雅不雅不雅鉴赏器可视区域内逍遥的挪动

  3. 可以压住其他的盒子 。图片和文字

  4. 加定位不须要转化 ,编制可以直接设置宽高,的定位加定位不设置宽高 ,编制会默许内容宽度

/*定位叠加,后来者居上	,编制数值越除夜,的定位就越靠上*/
z-index: 1;


1.绝对定位

【定位导读】

  1. 元素在挪动职位的时辰,是的定位绝对本来的职位来讲的(自恋型 ,该元素地址的编制盒子内举办挪动)

  2. 跟父亲元素和不雅不雅不雅不雅鉴赏器没有相干 。

  3. 当然这个盒子走了,的定位他的编制职位延续占据,延续保管 ,的定位不脱标。编制


【定位写法】

position: relative;
    top: 300px;
    left: 30px;
/*位偏移 top  bottom  left  right*/


2.尽对定位

【定位导读】

  1. 元素挪动职位时辰 ,是绝对祖先元历来讲的 。

  2. 假定没有父元素或祖先元素没有定位(浮动也算) ,就以不雅不雅不雅不雅鉴赏器来对齐的。

  3. 假定父亲有定位(绝对、尽对、结实定位) ,则以比来一级的祖先元素为参考点定位。

  4. 他爸爸没有定位,他爷爷有定位 ,他以爷爷来定位。

  5. 尽顶定位不占据本来的职位,轮播图采取的尽对定位 。


【子尽父相】

  1. 子级独霸尽对定位,父级则需求绝对定位(top:0)

  2. 父亲必须保管职位,子盒子不须要保管职位


【定位写法】

position: absolute;
    top: 30px;
    left: 20px;
/*位偏移 top  bottom  left  right*/


3.结实定位

【定位导读】

  1. 以不雅不雅不雅不雅鉴赏器的可视窗口来挪动

  2. 和父元素有相干

  3. 不跟着动弹条而动弹

  4. 不占据本来的职位


【结实写法】

position: fixed;
    top: 300px;
    right: 30px;  
/*位偏移 top  bottom  left  right*/


【右边版心写法】

position: fixed;
    left: 50%;
    margin-left: 450px;
/*再挪动盒子的宽的一半*/


4.粘性定位

【定位导读】

  1. 以不雅不雅不雅不雅鉴赏器的可视窗口为参照点,挪动元素(结实定位的特点)

  2. 粘性定位占据本来的职位(绝对定位的特点)

  3. 必须啊添加 top left right bottom 个中一个有效


【粘性定位写法】

position: sticky;
   top: 0;
/*部分不雅不雅不雅不雅鉴赏器不兼容,可独霸js来做*/

热门文章

HOT ARTICLE