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 ...
随机推荐
- struts 返回字符串
方法一: HttpServletResponse response = ServletActionContext.getResponse(); response.getWriter().print(& ...
- Codeforces Round #673 (Div. 2) C. k-Amazing Numbers（思维）
题目链接:https://codeforces.com/contest/1417/problem/C 题意 给出一个大小为 $n$ 的数组 $a$,计算当 $k$ 从 $1$ 到 $n$ 取值时在所有 ...
- 【NOIP 2015 D1 T2】信息传递（图论--带权并查集/bfs）
题目:有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学.游戏开始时,每人都只知道自己的生日.之后每一轮中, ...
- 【洛谷 p3372】模板-线段树 1（数据结构--线段树）
题目:已知一个数列,你需要进行下面两种操作:1.将某区间每一个数加上x:2.求出某区间每一个数的和. 解法:如题,模版题.需要加上 lazy 标记,也就是我的 upd.lazy 标记的思路就是对一个结 ...
- ZOJ3640-Help Me Escape 概率dp
题意: 在一个迷宫中有n条路经,你会被随机传送到一条路径,每条路径有一个挑战难度ci,你最初有一个战斗力f,如果你的战斗力大于ci,那么呆在那里ti天就可以成功逃出迷宫.如果你的战斗力小于等于ci,那 ...
- zjnu1189 土地租用（完整版）
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 77 Accepted: 10 Description 随着YYHS的OI ...
- 【ybt高效进阶2-4-3】【luogu P4551】最长异或路径
最长异或路径 题目链接:ybt高效进阶2-4-3 / luogu P4551 题目大意 给定一棵 n 个点的带权树,结点下标从 1 开始到 N.寻找树中找两个结点,求最长的异或路径. 异或路径指的是指 ...
- Failed to start LSB 网络服务启动失败
有些时候 VMare虚拟机挂起,重新运行后,XShell远程连接不上,检查VMare虚拟机,重启网卡会报错,查看日志,会有 Failed to start LSB .... CentOS7 会有一个网 ...
- Linux-单用户/救援模式
目录 企业案例一:忘记root密码 企业案例二:修改了默认的运行级别为poweroff或者reboot 企业案例三:误损坏MBR(只能以救援模式解决) 企业案例四:误删除GRUB菜单(只能以救援模式解 ...
- linux无需root挂载iso镜像文件
引言 起初,我在针对deepin制作一款appimage安装工具,想要其实现的功能就是自动获取图标,只需要输入软件名称和分类即可,当然以后也会寻找方案省去手动输入的麻烦. 后来我发现一个有趣的问题 o ...