css可以定位吗?

在CSS中关于定位的内容是:position:relative | absolute | static | fixed。在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置。

css定位的定义:

1. fixed

特点:不占空间、不随滚动条移动

相对于浏览器窗口进行定位,不占空间;

如果不设置定位坐标,则就在原来的位置;

如果结合定位坐标,就是相对于目标位置的距离;

层级要比普通标签高;

设置固定定位后,就一定是块元素

2、relative

特点:占空间、不脱离文档流的布局

如果不设置定位坐标,则就在原来的位置;

如果结合定位坐标,则是相对自身的距离;

层级要比普通标签高

3、absolute

特点: 不占空间、脱离文档流的布局

层级比普通标签高;

(谁设定位就跟着谁)绝对定位如果有定位坐标,则以祖先元素(需设置position为relative/absolute/fixed)作为坐标的参考;

如果祖先没有设置定位(relative/absolute/fixed),则一直往上找,直到找到body,就以body来进行定位,即相对于整个窗口来定位;

定位的起始位置为最近的父元素(position为relative/absolute,不能为static)

总之:当某个absolute定位元素的父元素具有position: relative/absolute/fixed时,定位元素都会依据父元素定位,而父元素没有position属性或者设置了默认属性(static),那么会根据body来定位

4、sticky

是relative和fixed的混合,在屏幕范围内时,没有影响(relative),当要移除屏幕范围时,会变成fixed

特点:

该元素并不脱离文档流,仍然保留元素原本在文档流中的位置,即在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效);

当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果(父元素的overflow属性需是默认值visible属性);

sticky 是容器相关的,也就说 sticky 的特性只会在他所处的容器里生效;

以上就是css可以定位吗?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑