CSS的定位布局(position)
定位
static(默认值) 没有开启定位
position: static;
relative 相对定位的性质
- 元素开启相对定位后,如果不设置偏移量元素位置将不会发生任何变化
- 参照坐标原点就是元素初始位置
position: static;
top: 0;
left: 0;
- 相对定位不会脱离文档流,性质不发生改变
- 相对定位会提升元素的层级
包含块(containing block)概念
没有开启定位时包含块就是当前元素最近的祖先块元素
<style>
.box4{
display: inline
}
</style>
<div class="box1">
<div class="box2">
<div class="box4">
<div class="box3"></div> <!-- box3的包含块是box2,因为box4此时是行内元素 -->
</div>
</div>
</div>
开启绝对定位后的元素包含块有两种情况
如果所有祖先元素都没有开启定位,则依据根元素()进行定位
<style>
.box1{
width: 400px;
height: 400px;
background-color: brown;
}
.box2{
width: 300px;
height: 300px;
background-color: #bfa;
}
.box3{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div class="box1">
1
<div class="box2">
2
<div class="box3">3</div>
</div>
</div>
</body>
如果祖先元素有开启定位,则依据最近的开启定位的祖先元素进行定位
<style>
.box1{
width: 400px;
height: 400px;
background-color: brown;
position: relative;
}
.box2{
width: 300px;
height: 300px;
background-color: #bfa;
position: relative;
}
.box3{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div class="box1">
1
<div class="box2"> <!-- 依据最近的开启定位的祖先元素进行定位 -->
2
<div class="box3">3</div>
</div>
</div>
</body>
absolute 绝对定位的性质
position: absolute;
不设置偏移量元素位置将不会发生任何变化
元素从文档流中脱离,元素性质发生改变
相对定位会提升元素的层级
绝对定位元素的参照坐标系是依据包含块的变化而变化的
fixed 固定定位的性质
性质与absolute定位大部分一致,唯一不同的是参照坐标系的依据
<style>
*{
font-size: 50px;
}
html{
height: 2500px; /* 同时固定定位不会随着滚动条滚动 */
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
/* 固定定位 */
position: fixed;
/* 唯一与absolute定位不同的是:fixed定位的坐标系原点永远是浏览器的视口(最左上角) */
left: 0;
top: 0;
margin-top: 100px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
.box4{
width: 400px;
height: 400px;
background-color: tomato;
}
.box5{
width: 300px;
height: 300px;
background-color: aliceblue;
}
</style>
<body>
<div class="box1">1</div>
<div class="box4">
4
<div class="box5">
5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
sticky 粘滞定位的性质
粘滞定位与相对定位的性质一致,但是粘滞定位可以使元素到达某个位置时将其固定
注意: 粘滞定位是参照坐标是依据其最近的拥有滚动机制的元素(包括overflow非visible的所有值)或包含块元素
<style>
body{
height: 2500px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
position: sticky;
top: 450px;
}
.box2{
width: 200px;
height: 200px;
background-color: royalblue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
CSS的定位布局(position)的更多相关文章
- CSS之定位布局（position，定位布局技巧）
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
- css之定位（position）
1.什么是定位: css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则 ...
- html5 css练习 定位布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Web开发中常用的定位布局position
定位布局就是为开发提供了更好的布局方式,可以根据需求给相应的模块设定相应位置,从而使界面更佳丰富,代码更佳完美. position是CSS中非常重要的一个属性,通过position属性,我们可以让元素 ...
- 定位布局—position
1. position的属性 1.1position:static 默认位置,没有定位效果 1.2 position:relative 相对定位,不会脱离文档流,相对于原来位置的变化 <!DOC ...
- css中的定位属性position（转）
css中的定位属性position 同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...
- CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC
display常用值 参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级 ...
- css定位 与position
本文同时发表于本人个人网站 www.yaoxiaowen.com 在正式讨论position之前,我们需要知道几个概念. 块元素:独占一行的元素.比如div,h1~h6,p等,它是自带换行的. 内联元 ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
随机推荐
- Python初学者随笔（一）_ 用Python写的第一个游戏“猜数字”
如标题所写,这篇随笔主要记录下学习Python过程中用Python写的第一个游戏--"猜数字"_跟着"小甲鱼"学Python,链接: https://b23.t ...
- 2019牛客暑期多校训练营（第七场）F-Energy stones（思维+树状数组）
>传送门< 题意:有n块能量石,每秒钟会增加Li的能量,但是一旦增长到了Ci它就不会增长了,它初始的能量为Ei. 现在有若干个时刻ti,会选择下标在[Si,Ti]的能量石吸取它们的能量,这 ...
- HDU-6599 I Love Palindrome String（回文自动机+字符串hash）
题目链接 题意:给定一个字符串\(|S|\le 3\times 10^5\) 对于每个 \(i\in [1,|S|]\) 求有多少子串\(s_ls_{l+1}\cdots s_r\)满足下面条件 \( ...
- zjnu1716 NEKAMELEONI (线段树)
Description "Hey! I have an awesome task with chameleons, 5 th task for Saturday's competition. ...
- HDU - 6030 矩阵快速幂 +多组输入快速幂板子
题意:一个项链用n个珠子构成,是一个条而不是一个环,由红和蓝两种颜色构成,要求以任意点为起点向后的素数个珠子中,保证红颜色的大于等于蓝颜色的,问你有多少种方案满足,范围:n(2≤n≤1018) 推导过 ...
- Linux程序设计——Linux基础
1. 什么是Linux 1)Linux系统是一种自由和开放源代码的类UNIX的完整操作系统. 2)林纳斯·本纳第克特·托瓦兹(LinusBenedictTorvalds,1969年~) 3)诞生于19 ...
- HTTP笔记4--HTTP 状态码
状态码作用.组成 HTTP 状态码负责表示客户端 HTTP 请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作.状态码的职责是当客户端向服务器端发送请求时,描述返回的请求结果. 状态码如 ...
- Go - 实现项目内链路追踪(二)
上篇文章 Go - 实现项目内链路追踪 分享了,通过 链路 ID 可以将 请求信息.响应信息.调用第三方接口的信息.调试信息.执行的 SQL 信息.执行的 Redis 信息 串起来,记录的具体参数在文 ...
- C++：Process returned -1073741571 (0xC00000FD)
启动程序无法输入,然后崩溃报错Process returned -1073741571 (0xC00000FD) 原因: 栈溢出了 栈的默认内存空间为1M,如果函数中定义的数组太大会导致内存溢出. 解 ...
- codeforces 911D
D. Inversion Counting time limit per test 2 seconds memory limit per test 256 megabytes input standa ...