css position

    第一因素文档流 

position可以取五个值

参数描述

absolute绝对定位;脱离⽂档流的布局,遗留下来的空间由后⾯的元素填充。定位的起始位置为最近的⽗元素(postion不为static),否则为Body⽂档本身。

relative相对定位;不脱离⽂档流的布局,只改变⾃身的位置,在⽂档流原先的位置遗留空⽩区域。定位的起始位置为此元素原先在⽂档流的位置。

fixed固定定位;类似于absolute,但不随着滚动条的移动⽽改变位置。

static默认值;默认布局。 忽略 top, bottom, left, right和z-index

inherit从父元素继承该属性的值

以上的absolute 和fixed 可以使得元素脱离文档流。

position属性只是定义元素的定位方式,要想此元素能按照希望的位置显示,就需要使⽤下⾯的属性(position:static不⽀持这些):

left : 表示向元素的左边插⼊多少像素,使元素向右移动多少像素。

right :表示向元素的右边插⼊多少像素,使元素向左移动多少像

素。

top :表示向元素的上⽅插⼊多少像素,使元素向下移动多少像素。

bottom :表示向元素的下⽅插⼊多少像素,使元素向上移动多少像

素。

上⾯属性的值可以为负,单位:px 。

绝对定位(absolute)

脱离⽂档流的布局,遗留下来的空间由后⾯的元素填充。

定位的起始位置为最近的⽗元素(postion不为static),否则为Body⽂档

本身。

相对定位(relative)

不脱离⽂档流的布局,只改变⾃身的位置,在⽂档流原先的位置遗留空⽩区域。

定位的起始位置为此元素原先在⽂档流的位置

固定定位(fix)

类似于absolute,但不随着滚动条的移动⽽改变位置。

默认定位(static)

表示此元素为默认定位⽅式。

继承(inherit)

从父元素继承定位⽅式。

1.父容器的position属性为relative

由上图可知,div继承了父类的position属性(relative);这时候div-a没有脱离文档流,只是相对于原来的位置向右边偏移了,留下一个空位。参考绝对定位的图形。

注意:此时的父容器是没有设置宽高的,(见图),我们可以看见父容器宽度为100%,高度自适应。

下面我们把父容器的定位改成absolute

2.父容器的position属性为absolute

可以看出,div-a脱离了文档流,相对于父容器向右偏移了350px,后面的div-b占据了他的位置.

注意:此时我们可以发现,父容器宽和高都是自适应的。

然后我们在对两种情况进行研究。

父容器postion属性为static

父容器宽度为100%,高度自适应。

父容器的position属性为fixed

父容器宽高均自适应

从这里面。我们不仅可以看出inherit的特性。而且我们还发现了以下规则:

重点

在父容器没有设置宽高的时候,

当父容器定位为relative和static时,及没有脱离文档流时,宽度为100%

当父容器定位为absolute和fixed时,及脱离文档流时,宽高为自适应

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、定位的作用 改变元素的位置 让元素重叠放置任意位置 让元素固定在窗口固定位置 二、定位的种类 相对定位未脱离普...
    HGS阅读 4,778评论 0 0
  • 1. 介绍 1.1 说明 Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示...
    手指乐阅读 1,661评论 0 1
  • position有五个属性这,分别对应 position: absoluteabsolute是参照最近的已定位的父...
    N1kopapa阅读 3,077评论 0 0
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 8,073评论 0 7
  • 可能的值:absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的...
    青春前行阅读 2,910评论 0 0

友情链接更多精彩内容