美文网首页
position属性

position属性

作者: 专注_刻意练习 | 来源:发表于2019-01-22 16:36 被阅读0次

css position属性

static: 默认值。没有定位,元素出现在正常的流中。


relative:生成相对定位的元素,相对于其正常位置进行定位。因此,left:20 会向元素的left位置添加20像素。


可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。


absolute : 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过left top right 以及 bottom属性进行规定。

如果元素没有已定位的父元素,那么它的位置相对于<html>:

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。


fixed :生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过left top right 以及 bottom属性进行规定。


sticky 定位

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

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

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

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

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。


z-index属性指定了一个元素的堆叠顺序

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

z-index无效的情况,一共有三种:

1、父标签 position属性为relative;

2、问题标签无position属性(不包括static);

3、问题标签含有浮动(float)属性。

相关文章

  • HTML 之CSS 布局

    概述 position属性 position属性列表 absolute 属性 fixed 属性 relative属...

  • CSS定位网页元素

    position 属性 position 属性与float属性一样,在css排版中都非常重要。position顾名...

  • css定位之position

    以下是我对position属性的了解和总结。 position:static;position的默认属性,元素框会...

  • CSS定位

    定位position position 属性指定了元素的定位类型。position 属性的四个值:staticre...

  • BFC

    1. CSS定位属性: position 1.1 定义及常见的属性值 1.1.1 定义: position 属性指...

  • Position 属性

    1. 介绍 1.1 说明 Position属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。...

  • position属性

    position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者...

  • position属性

    position属性都有什么?都有什么区别,都是根据谁定位的? 1.absolute 生成绝对定位的元素,相对于 ...

  • position属性

    position 属性在页面布局定位元素的时候会经常用到,自以为已经运用的很熟练,直到有一天发现对 relativ...

  • position属性

    六个属性值:static、relative、absolute、fixed、sticky和inherit。 stat...

网友评论

      本文标题:position属性

      本文链接:https://www.haomeiwen.com/subject/ygqrjqtx.html