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 ...
随机推荐
- 2018-2019 ACM-ICPC Brazil Subregional Programming Contest PART (10/13)
$$2018-2019 ACM-ICPC Brazil Subregional Programming Contest$$ \(A.Slackline\ Adventure\) \(B.Marbles ...
- Codeforces Round #625 (Div. 2, based on Technocup 2020 Final Round) B. Journey Planning（映射）
题意: 已知 n 所城市(从 1 至 n 编号)及其美丽值,选取一条旅行路线,满足路线中两两城市美丽值之差等于编号之差,求所有旅行路线中美丽值的最大值. 思路: 美丽值与编号作差,差值为键,映射累加 ...
- hdu3706 Second My Problem First
Problem Description Give you three integers n, A and B. Then we define Si = Ai mod B and Ti = Min{ ...
- 二、Python基础（input、变量名、条件语句、循环语句、注释）
一.input用法 input在Python中的含义为永远等待,直到用户输入了值,从而将所输入的值赋值另外的一个东西. n=input('请输入......') 接下来用一个例子学习input的用法 ...
- mysql-画图
目录 阿里数据库产品rds 淘宝数据库架构 数据库下载 Mysql3种安装方法 mysql_install_db安装数据库命令脚本中有生成初始mysql数据 也可以把mysql_install_db集 ...
- 容器技术学习系列（一）-Docker基础知识学习
一.概述 1.Docker是什么? 1)Docker是世界领先的软件容器化平台 2)Docker公司开发,开源,托管在github 3)跨平台,支持Windows.MacOS.Linux 2.Dock ...
- Eazfuscator.NET(.net混淆工具)
软件功能 调试支持: 在你的程序集被Eazfuscator.NET混淆后,它不会成为不可调试混乱的砖块.你总是可以得到一个行号,出现未处理的异常,查看可读的堆栈跟踪,甚至附加调试器来遍历你的模糊代码. ...
- 操作系统：Linux进程与线程
这里是一部分内容,还会做修改. 一:目的及内容 学习fork(),exec,pthread库函数的使用,阅读源码,分析fork,exec,pthread_create函数的机理 代码实现: 进程A创建 ...
- HTML5 Template in Action
HTML5 Template in Action https://developer.mozilla.org/es/docs/Web/HTML/Elemento/template https://de ...
- js & touch & swiper
js & touch & swiper https://developer.mozilla.org/en/docs/Web/API/Touch_events "use str ...