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 ...
随机推荐
- left join与inner join
举例a.b表: bId bNum 1 20 2 30 aId aNum 1 10 2 20 3 30 left join以左表为准 select * from a left join b on a.a ...
- A - A Gifts Fixing
t组询问,每次给出数列长度n 以及两个长度为n的数列{ai}和{bi}. 有三种操作:ai−1, bi−1以及ai,bi同时− 1 -1−1. 问最少多少步以后可以让两个数列变成常数数列. ...
- Equal Numbers Gym - 101612E 思维
题意: 给你n个数vi,你有k次操作.每一次操作你可以从n个数里面挑一个数,然后使得这个数乘于一个正整数.操作完之后,这n个数里面不同数的数量就是权值.你要使得这个值尽可能小. 题解: 如果a%b== ...
- Educational Codeforces Round 88 (Rated for Div. 2) D、Yet Another Yet Another Task
题意: 给你一个含n个数a1,a2...an的数组,你要找到一个区间[l,r],使得al+a(l+1)+...+a(r-1)+ar减去max(al,a(l+1),...,a(r-1),ar)的值尽可能 ...
- java——final、权限修饰符
final修饰类: final修饰成员方法: final修饰局部变量的时候: 对于基本类型来说,变量的数值不能改变 对于引用类型来说,变量的地址不能改变 final修饰成员变量的情况: 权限修饰符:
- HDU2732 Leapin' Lizards 最大流
题目 题意: t组输入,然后地图有n行m列,且n,m<=20.有一个最大跳跃距离d.后面输入一个n行的地图,每一个位置有一个值,代表这个位置的柱子可以经过多少个猴子.之后再输入一个地图'L'代表 ...
- poj1787 Charlie's Change
Description Charlie is a driver of Advanced Cargo Movement, Ltd. Charlie drives a lot and so he ofte ...
- 找工作面试题记录与参考资料（Golang/C++/计算机网络/操作系统/算法等）
记录下去年(2020年)找工作的面试题及参考资料. C++ 智能指针的实现原理 多态的实现原理[2] C++11/14/17新特性[3] 手写memcpy和memmove[4] 介绍下boost库 计 ...
- K8S(13)监控实战-部署prometheus
k8s监控实战-部署prometheus 目录 k8s监控实战-部署prometheus 1 prometheus前言相关 1.1 Prometheus的特点 1.2 基本原理 1.2.1 原理说明 ...
- Chapter Zero 0.1.1 计算机硬件五大单元
计算机硬件的五大单元 先从CPU说起,CPU的全称如下: 中央处理器(Central Processing Unit,CPU) CPU作为一个特定功能的芯片,内含微指令集, 主机的功能差异,主要参考C ...