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应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
随机推荐
- [看图说话] 基于Spark UI性能优化与调试——初级篇
Spark有几种部署的模式,单机版.集群版等等,平时单机版在数据量不大的时候可以跟传统的java程序一样进行断电调试.但是在集群上调试就比较麻烦了...远程断点不太方便,只能通过Log的形式,进行分析 ...
- Laravel分页
Laravel使用的过程中,有些功能把前端页面的表达"写死了",比如分页的翻页按钮! 当然你会说Laravel的Bootstrap样式也很好看啊,但是实际项目中,翻页按钮常常需要满 ...
- C#中函数的功能和类型
函数 就是方法是独立完成某项功能的一个个体 函数的的三个好处:1.提高代码的重用性.2.提高功能开发的效率,3.提高代码的可维护性(主要功能). 函数也分为 固定功能函数(这类函数具有可封闭 ...
- JavaWeb之MVC模式
一.什么是MVC设计模式? MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Contr ...
- 迷茫<第一篇：初到北京>
时光如梭,毕业四年了,遥想当年刚毕业的场景就像是昨天发生一样,这四年的人生,就是在不停的漂泊,不断的受挫.感慨良多,一言难以说尽. 2013年11月29号毕业,刚到北京的第二天我就顺利的找到了工作, ...
- WeMall商城系统的Android app商城中的wemall-mobile代码
wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改. [适合研究学习,支持wemall3.x版本] 1.快 ...
- 基于Spring Cloud和Netflix OSS 构建微服务-Part 1
前一篇文章<微服务操作模型>中,我们定义了微服务使用的操作模型.这篇文章中,我们将开始使用Spring Cloud和Netflix OSS实现这一模型,包含核心部分:服务发现(Servic ...
- 长连接 Socket.IO
概念 说到长连接,对应的就是短连接了.下面先说明一下长连接和短连接的区别: 短连接与长连接 通俗来讲,浏览器和服务器每进行一次通信,就建立一次连接,任务结束就中断连接,即短连接.相反地,假如通信结束( ...
- springMVC在普通方法中调用service方法
SpringContextUtil类 package com.common.util; import org.springframework.beans.BeansException;import o ...
- SEO-站内优化规范
类别 要求 实际工作要求 程 序 设 计 1.DIV+CSS布局 2.站内导航连接性良好 面包屑导航,翻页方式使用样式二,文章和产品上一页和下一页 3.图片的ALT属性 在编程时注意写 4.超级链接的 ...