css定位流布局
上面我们一起研究了浮动布局的特点和如何清除浮动给布局带来的不良影响，今天我们继续来研究定位流布局的特点和一些常用的布局技巧。
定位流主要有三种，一是相对定位，二是绝对定位，三是固定定位；下面我们一一进行分析。
相对定位
相对定位就是相对于自己以前在标准流中的位置来移动；
写法：
position: relative;
示例程序：
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
top: 20px;
left: 20px;
}
.box3{
background-color: blue;
}
<style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
ps：
- 在相对定位中同一个方向上的定位属性只能使用一个相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- top/bottom 只能用一个
- left/right 只
能用一个
- 在相对定位中同一个方向上的定位属性只能使用一个相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- 由于相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块级元素
- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局，如下图：
相对定位一般用于盒子位置的微调：
input{
width: 200px;
height: 50px;
}
img{
width: 100px;
height: 50px;
position: relative;
top: 20px;
}
跟后面学习的绝对定位配合使用，下面再详细了解。
绝对定位
绝对定位就是相对于body或者某个定位流中的祖先元素来定位。
写法：
position: absolute;- 这是定位前的样子：
示例代码：
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: absolute;
left: 0;
top: 0;
}
.box3{
background-color: blue;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>定位后的样子：
分析定位前后的变化，我们可以得出以下几点结论：
- 绝对定位的元素是脱离标准流的, 不会占用标准流中的位置
- 由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
- 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
- 相对于body定位会随着页面的滚动而滚动
- 一个绝对定位的元素会忽略祖先元素的padding，例如：
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 300px;
height: 300px;
background-color: red;
border: 10px solid #000;
padding: 30px;
position: relative;
box-sizing: border-box;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
那么，绝对定位到底是相对于谁来定位呢？我们来仔细研究一下：
- 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
示例代码：
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 0;
bottom: 0;
}
</style>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
效果图：
绝对定位大多配合相对定位来使用，一般不会单独出现。
固定定位
固定定位可以让某个盒子不随着滚动条的滚动而滚动。
写法：
position: fixed;- 示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>74-固定定位</title>
<style>
*{
margin: 0;
padding: 0;
}
p{
width: 100px;
}
a{
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 25px;
text-decoration: none;
text-align: center;
color: #000;
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>
<a href="#">^<br>顶部</a>
</body>
</html>示例图片：
ps：
- 固定定位的元素是脱离标准流的, 不会占用标准流中的位置
- 由于固定定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
固定定位应用场景:
- 网页对联广告
- 网页头部通栏(穿透效果)
- 回到顶部按钮
子绝父相
前面说过相对定位和绝对定位都是一起出现, 很少单独使用。
那么为什么要这样呢，先看示例的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>-子绝父相</title>
<style>
*{
margin: ;
padding: ;
}
ul{
width: 800px;
height: 50px;
background-color: red;
list-style: none;
margin: 0px auto;
margin-top: 100px;
}
li{
width: 100px;
/*height: 50px;*/
line-height: 50px;
float: left;
background-color: gray;
text-align: center;
}
.li03{
background-color: darkgray;
position: relative;
}
ul li img{
/*
缺点以前的位置仍然被占用, 不能让文字居中对齐
*/
/*position: relative;
left: -35px;
top: -15px;*/
/* 浏览器调整之后位置会发生变化*/
/* position: absolute;
top: 95px;
left: 535px;*/
position: absolute;
left: 37px;
top: -5px;
}
</style>
</head>
<body>
<ul>
<li>服装城</li>
<li>美妆馆</li>
<li>京东超市</li>
<li class="li03">全球购<img src="hot.png" alt=""></li>
<li>闪购</li>
<li>团购</li>
<li>拍卖</li>
<li>江哥</li>
</ul>
</body>
</html>
相对定位：
绝对定位：
子绝父相：
ps：
- 相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流。
- 例如一下效果：
是不是要收广告费，哈哈哈。到这里就结束啦，下周见。
css定位流布局的更多相关文章
- CSS 定位
一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位, ...
- 【CSS】 CSS 定位
css 定位和浮动 *******本章大量内容copy自w3school********* 定位对于html界面还是很重要的,因为定位会直接影响到用户的视图.对于css而言,定位也比较灵活. 浮动是一 ...
- CSS 定位 (Positioning) 实例
CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...
- web前端css定位position和浮动float
最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...
- CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- 常用的CSS定位，XPath定位和JPath定位
CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景 在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
随机推荐
- nginx.conf完整配置实例
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; ...
- 读书笔记 effective c++ Item 22 将数据成员声明成private
我们首先看一下为什么数据成员不应该是public的,然后我们将会看到应用在public数据成员上的论证同样适用于protected成员.最后够得出结论:数据成员应该是private的. 1. 为什么数 ...
- 过程 : 概念 : 结构 jobbox jobPost
概念是employer创建jobPost时,可以publish或unpublish. sort expired后,会通过server tast 去更新成history.所有的publish和unpub ...
- 【Scala】Scala之Methods
一.前言 前面学习了Scala的Class,下面接着学习Method(方法). 二.Method Scala的方法与Java的方法类似,都是添加至类中的行为,但是在具体的实现细节上差异很大,下面展示一 ...
- Android业务组件化之Gradle和Sonatype Nexus搭建私有maven仓库
前言: 公司的业务组件化推进的已经差不多三四个月的时间了,各个业务组件之间的解耦工作已经基本完成,各个业务组件以module的形式存在项目中,然后项目依赖本地的module,多少有点不太利于项目的并行 ...
- php弱类型语言中的类型判断
1.php一个数字和一个字符串进行比较或者进行运算时,PHP会把字符串转换成数字再进行比较.PHP转换的规则的是:若字符串以数字开头,则取开头数字作为转换结果,若无则输出0. 例如:123abc转换后 ...
- 提高C++编译速度-------pimpl 模式& 桥接模式（转）
pimpl 模式(Private Implementation),我们常常听到诸如“不要改动你的公有接口”这样的建议,所以我们一般都会修改私有接口,但是这会导致包含该头文件的所有源文件都要重新编译,这 ...
- 3450: Tyvj1952 Easy
3450: Tyvj1952 Easy Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 269 Solved: 198[Submit][Status] ...
- vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- 引用类型-----Object
本文章转载至:https://segmentfault.com/a/1190000003984584 关于引用类型的概念: 引用类型:引用类型的值(对象)是引用类型的一个实例: 对象:是某个特定引用类 ...