CSS的定位之position

本文详细解析了前端定位的基本概念,包括绝对定位、相对定位、固定定位及其应用场景,并提供了实现让div元素相对父级居中的两种方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

自学前端的这两个月,自觉CSS里面有那么一丢丢绕的其实就几个问题:

定位(position),浮动,兼容性(当然,这个不仅仅是写CSS时要考虑的问题)。今天先屡一下定位,很多不完善的地方希望好心的大侠帮忙指出来哈哈~【#(∩_∩)#】~


position的基本定义

1,absolute(绝对定位):相对于最近的父级元素,如果没有给这个父级元素表明相对定位(relative),那么会默认为相对body。

2,relative(相对定位):相对于自身的位置。

3,fixed:相对于浏览器窗口,进行定位(可以脑补那些消不掉的小广告~)

——————————————————————————————————

4,static(默认值):没有定位,会忽略top,bottom,left,right,z-index等声明。

5,inherit(继承):从父元素继承position属性。

且,z-index数值越大越在上层。

/*对于absolute结合relative使用,我的理解是:注意absolute不是去寻找relative作为父级元素进行相对定位——而是,要父级+relative两者兼备才可以进行相对定位*/


position的常用总结

一,让一个div相对父级元素居中的几种方法

1,margin:0 auto;(左右居中)

2,先给父级元素表明 position:relative;

     然后再给该元素标以下

     position:absolute;

      left:50%;top:50%;

      marigin-left:-1/2width;

      margin-top:-1/2height;

     上下和左右均可居中~~

二,待续~~边练习边随时补充~


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值