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 ...
随机推荐
- HDU-6881 Tree Cutting （HDU多校D10T5 点分治）
HDU-6881 Tree Cutting 题意 \(n\) 个点的一棵树,要求删除尽量少的点,使得删点之后还是一棵树,并且直径不超过 \(k\),求删除点的数量 分析 补题之前的一些错误想法: 尝试 ...
- Codeforces Round #625 (Div. 2, based on Technocup 2020 Final Round) B. Journey Planning（映射）
题意: 已知 n 所城市(从 1 至 n 编号)及其美丽值,选取一条旅行路线,满足路线中两两城市美丽值之差等于编号之差,求所有旅行路线中美丽值的最大值. 思路: 美丽值与编号作差,差值为键,映射累加 ...
- Codeforces Beta Round #19 D. Points
Description Pete and Bob invented a new interesting game. Bob takes a sheet of paper and locates a C ...
- [Golang]-3 函数、多返回值、变参、闭包、递归
// test01 project main.go package main import ( "fmt" ) // 单返回值的函数 func plus(a int, b int) ...
- 牛客网多校第7场 J Sudoku Subrectangles 【构造】
题目:戳这里 题意:给一个n*m的矩阵,里面由a~z及A~Z构成,问有多少个子矩阵满足任意一行或一列中都没有相同的字母. 解题思路:左上角和右下角两点可以确定一个矩阵.可以先预处理出来每个点作为一个矩 ...
- C++动态申请一维数组和二维数组
在平时的编程过程中,我们经常会用到数组来存放数据,我们可以直接申请足够大空间的数组来保证数组访问不会越界,但是即便这样,我们依然不能保证空间分配的足够,而且非常的浪费空间.有时候我们需要根据上面得到的 ...
- java8按照lamda表达式去重一个list,根据list中的一个元素
/** * 按照指定字段给list去重 * @param list * @return */ public static List<DataModel> niqueList(List< ...
- Petrozavodsk Summer Training Camp 2016H（多标记线段树）题解
题意: \(n\)个草,第\(0\)天种下,高度都为\(0\),每个草每天长高\(a_i\).现给出\(q\)询问,每次给出第\(b_i\)天,然后把高于\(d_i\)的全削成\(d_i\),每次问你 ...
- js optional chaining operator
js optional chaining operator js 可选链 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效. ?. 操作符的功能类似于 ...
- 使用 js 实现十大排序算法: 插入排序
使用 js 实现十大排序算法: 插入排序 插入排序 // 双重循环 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!