css：position定位属性详解

今天来为大家说一下最常用到的 position 定位属性

说定位之前先来看看什么是文档流：

w3c里面的解释是：正常流中的框属于格式化上下文，它可以是块的或内联的，但不能同时出现。块级框参与块格式化上下文。内联级别的框参与内联格式上下文。

个人解释一下：

每个块自上而下分成一行一行，并在每行中按从左至右的顺序排放元素；

每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端，若当前行容不下，则另起新行再浮动；

内联元素也不会独占一行，几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素；

有三种情况将使得元素脱离文档流而存在，分别是 float，absolute ，fixed

position属性有五个可选值，分别是absolute、fixed、relative、static、inherit：

absolute: 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right以及bottom属性进行规定。
fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left、top、right以及bottom属性进行规定。
relative: 生成相对定位的元素，相对于其正常位置进行定位。
static: 默认值。没有定位，元素出现在正常的流中（忽略 top、bottom、left、right 或者 z-index 声明）。
inherit: 规定应该从父元素继承 position 属性的值。

position属性在通常情况下有4个可选值，分别是：static、relative、absolute、fixed。还有第5个属性sticky，因部分浏览器可能还不支持，所以就先不介绍

一、static 默认值

该关键字指定元素使用正常的布局行为，遵循正常的文档流对象。此时 top、right、bottom、left 属性无效

<style>

.box {

width: 300px;

height: 300px;

background-color: #ccc;

}

.box_chl {

width: 100px;

height: 100px;

background-color: red;

position: static;

/* 这个left没有起作用 */

left: 10px;

}

</style>

<body>

</div>

</body>

二、relative 相对定位

relative 相对定位元素的定位是相对其正常位置。就是相对于原来的位置进行定位

<style>

.box {

width: 300px;

height: 300px;

background-color: #ccc;

}

.box_chl1 {

width: 100px;

height: 100px;

background-color: red;

}

.box_chl2 {

width: 100px;

height: 100px;

background-color: blue;

position: relative;

}

.box_chl3 {

width: 100px;

height: 100px;

background-color: green;

}

</style>

<body>

</div>

</body>

这里可以看到蓝色块只加 relative 相对定位，不加 top、right、bottom、left 等属性时，他处在正常文档流中

如果给他添加了 top、right、bottom、left 等属性时，蓝色块 就会相对于其原位置进行移动

.box_chl2 {

width: 100px;

height: 100px;

background-color: blue;

position: relative;

left: 15px;

top: 15px;

}

三、absolute 绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html

absolute 定位使元素的位置与文档流无关，因此不占据空间。绝对定位后会脱离文档流

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

<style>

.box {

width: 300px;

height: 300px;

background-color: #ccc;

}

.box_chl1 {

width: 100px;

height: 100px;

background-color: red;

margin-left: 50px;

}

.box_chl1_demo{

width: 50px;

height: 50px;

background: #00FFFF;

position: absolute;

left: 30px;

}

</style>

<body>

</div>

</body>

这里可以看到蓝色块绝对定位后他是相对于 body 向左移动30px 定位的，因为它的俩个父元素都没有定位

如果给它的父元素加上定位后，它是相对于红色块来移动定位的

.box_chl1 {

width: 100px;

height: 100px;

background-color: red;

margin-left: 50px;

position: relative;

}

四、fixed 固定定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

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

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

<style>

.box {

width: 100%;

height: 4000px;

background-color: #ccc;

background: linear-gradient(to top,#ffff00,#5500ff);

}

.box_chl1 {

width: 100px;

height: 100px;

background-color: red;

position: fixed;

right: 50px;

top: 50px;

}

</style>

<body>

</div>

</body>

这里可以看到红色块相对于浏览器窗口位置是固定的

position定位详解726 播放 · 0 赞同视频

https://www.bilibili.com/video/BV13b411g78D?p=73

www.bilibili.com/video/BV13b411g78D?p=73

posted @ 2023-02-12 17:15 imxiangzi 阅读(127) 评论(0) 编辑收藏举报

刷新页面返回顶部

im18620660608

css：position定位属性详解

公告