0
点赞
收藏
分享

微信扫一扫

前端CSS:关于定位的个人理解。

谁知我新 2022-04-04 阅读 39
csshtml5

position 属性指定了元素的定位类型。

position 属性的五个值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素可以使用的顶部,底部,左侧和右侧属性定位。

然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

1、static:默认的,也就是没有定位,那么没有指定定位方式是什么?是相对于文档流,什么叫相对于文档流,比如,

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

像这样的Html代码,会一行一行的往下展示,这里要注意区分行内元素以及块级元素

2、absolute  绝对定位

常用的方法是:

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

left top right bottom是四个方向。要注意,假如  父元素下面有一个子元素,

那么子元素的绝对定位是相对于父元素来说的。

如果该子元素的父元素没有指定定位方式,也就是默认的static,那么子元素再往父元素的父元素去找,也就是说如果父元素没有设置特殊的定位方式,就会相对于浏览器窗口进行绝对定位了,

注意绝对定位已经脱离了文档流了,会出现重合的情况。

3、relative 相对定位

相对定位是相对的谁?  答:一个元素本该在的位置。

举个例子,正常文档流写了几个h1标签,因为h1是块级元素所以会不停的换行,

如果给其中一个h1指定了相对定位,left:10px,那么就会从原本正确的位置 -- 向右移动10px。

4、固定定位fixed

position:fixed;

固定定位永远都会相对于浏览器窗口进行定位,固定定位会固定在浏览器的某个位置,不会随滚动条滚动。最常用的就是电脑里面是不是弹出的小广告,如果你不差掉它,当时滑动鼠标查看网页时,小广告一直会在那里,还有常用的就是网站或者APP的导航栏和底部的选择栏。

5、sticky 粘性定位

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 

而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

 如图:滑动条已经往下滑了,仍然会固定在距离页面头部10px的位置处。

举报

相关推荐

0 条评论