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应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
随机推荐
- 禁止linux被ping
cho "net.ipv4.icmp_echo_ignore_all=1" >> /etc/sysctl.conf sysctl -p 生效 开启ping功能: 删除/ ...
- 完全理解Python迭代对象、迭代器、生成器
在了解Python的数据结构时,容器(container).可迭代对象(iterable).迭代器(iterator).生成器(generator).列表/集合/字典推导式(list,set,dict ...
- Java程序通过代理访问网络
问题背景 最近工作上有开发爬虫的任务,对目标网站数据进行抓取,由于大部分网站都在国外,无法直接访问,需要通过代理才能登录.爬虫部署的服务器在香港,所以爬虫部署到服务器后,是可以访问目标网站的,但本地开 ...
- JS中的this 指向问题
我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...
- RMI原理及简单示例
分布式对象 在学习 RMI 之前,先来分布式对象(Distributed Object):分布式对象是指一个对象可以被远程系统所调用.对于 Java 而言,即对象不仅可以被同一虚拟机中的其他客户程序( ...
- node c++多线程插件构想
最近想写一个node的c++插件实现线程.提供的api使用回调并进行二次包装使其返回一个promise,并且要求需要在工作线程里执行的函数为async函数.如果是node7.0以下的版本,函数必须返回 ...
- node删除当前文件底下全部文件的正确姿势
今天在项目上犯了一个很愚蠢的错误 执行如下,结果删除掉了项目根目录底下的所有配置文件,导致本地虚拟机挂掉,这次多一个/的给我教训真是莫大的...哎 正确的姿势为:
- PowerDesigner建模应用（二）逆向工程，导出PDM文件前过滤元数据(表、视图、存储过程等)
在上一篇文章<PowerDesigner建模应用(一)逆向工程,配置数据源并导出PDM文件>步骤二中导出了目标数据库对应的PDM文件, 该文件中展示出了所有表的信息与关系. 某些业务场景下 ...
- 【转】nginx配置：location配置方法及实例详解
location匹配的是nginx的哪个变量? $request_uri location的匹配种类有哪些? 格式 location [ 空格 | = | ~ | ~* | !~ | !~* ] /u ...
- macaca环境搭建(web 和 android)
一.安装配置JDK 1.1下载JDK地址http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...