什么是CSS绝对定位,绝对定位怎么用?

什么是CSS绝对定位,绝对定位怎么用?

今天我们就以本网站为例吧。

我们先看绝对定位怎么写的  

position: absolute;

绝对定位的概念

设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

那么绝对定位怎么用呢?


image


看这个二级导航就是用绝对定位写的,绝对定位的好处就是不管你怎么在改变屏幕的尺寸他都会在这个位置


image


看我缩小了屏幕尺寸,这个二级导航依然在前端学习的下面


其实很简单,用绝对定位,首先要在它的父级写上相对定位


  position: relative;


image


在导航父级写上相对定位,就可以实现绝对定位的效果了。


希望可以解决您的实际问题。


微信扫码咨询
建站咨询
cache
Processed in 0.011127 Second.