css中如何使用定位?
css中如何使用定位?
博为峰教研组 发表于8个月前
css中如何使用定位?
  • 发表于 8个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

华为云·免费上云实践>>>   

css中最常用的定位方式有两种,分别是绝对定位和相对定位。这两者对于初学者来说是很不容易弄懂的。要真正理解绝对定位和相对定位,需要先知道一个知识点文档流。那么什么是文档流呢?

一.文档流

CSS的定位机制有3种:普通流、浮动(float:left/right/none)和定位。这里的普通流就是文档流,也就是说页面布局按照从左至右,一个挨一个的顺序排列的。

如果将元素的position属性设置为absolute即绝对定位。此时元素就会脱离文档流。同样如果给元素设置了浮动,也会脱离文档流。

了解了文档流之后,想必大家应该知道为什么使用定位了吧,那问题又来了,何时使用定位呢?

二.何时使用定位

一般设置样式不需要用到绝度定位和相对定位,当你想在网页 或一个div的上方漂浮着一个div ,让这个div挡住下面的div ,就想当于,绝对定位相对定位的div 踩在 了整个网页的上面。而且你还可以设置这个div的移动位置,让这个div 任意处在这个网页中的任何位置。一般新手,网页布局的不对,导致div不按照自己的想法布局,就设置相对定位绝对定位,导致其他的元素 也乱掉,最后全都要设置绝对定位了。所以在使用绝对定位和相对定位的时候一定要慎重。

 

1.相对定位:relative。相对于原来的位置移动,设置该属性值后该元素仍在文档流中,不影响其他元素的布局。

可以通过改变left,top,right,bottom等属性的值改变元素的位置。但不会影响其他元素的布局

运行结果:

现在对第2个div设置相对定位,对.div2的样式修改如下

 

此时运行结果如下:

 

对比可以看出,将div2设置为相对定位,它的left和top的值是相对于他自身的。而其他元素的位置不会受影响。

2.绝对定位: absolute.设置为绝对定位后,元素会脱离文档流,如果设置偏移量会影响其他元素的位置。

我们将例子中div2的定位方式改为绝对定位

 

运行结果:

 

由运行结果我们可以看出:

1.div2悬浮在页面上,偏移的位置就是设置的left和top的值。2.div2的原来占据的位置被div3占据了。导致div3的位置发生变化。

3.本例中没有设置div2的宽度,此时div2的宽度就是div2的内容。

 

共有 人打赏支持
粉丝 44
博文 1224
码字总数 479077
×
博为峰教研组
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: