css 08-CSS属性：定位属性
08-CSS属性：定位属性
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
position: absolute; <!-- 绝对定位 -->
position: relative; <!-- 相对定位 -->
position: fixed; <!-- 固定定位 -->
下面逐一介绍。
#相对定位
相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
我们之前学习的背景属性中，是通过如下格式：
background-position:向右偏移量 向下偏移量;
但这回的定位属性，是通过如下格式：
position: relative;
left: 50px;
top: 50px;
相对定位的举例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
body{
margin: 0px;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
}
.div2{
position: relative;/*相对定位：相对于自己原来的位置*/
left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">有生之年</div>
<div class="div2">狭路相逢</div>
</body>
</html>
效果：
#相对定位不脱标
相对定位：不脱标，老家留坑，别人不会把它的位置挤走。
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
#相对定位的用途
如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：
- （1）微调元素
- （2）做绝对定位的参考，子绝父相
#相对定位的定位值
left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移
PS：负数表示相反的方向。
：
position: relative;
left: 40px;
top: 10px;
：
position: relative;
right: 100px;
top: 100px;
：
position: relative;
right: 100px;
bottom: 100px;
：
position: relative;
left: 200px;
bottom: 200px;
如果要描述上面这张图的方向，我们可以首先可以这样描述：
position: relative;
left: 200px;
top: 100px;
因为left: 200px等价于right: -200px，所以这张图其实有四种写法。
#绝对定位
绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
格式举例如下：
position: absolute; /*绝对定位*/
left: 10px; /*横坐标*/
top/bottom: 20px; /*纵坐标*/
#绝对定位脱标
绝对定位的盒子脱离了标准文档流。
所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
#绝对定位的参考点（重要）
（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角：
（2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角：
为了理解“首屏”二字的含义，我们来看一下动态图：
问题：
答案：
用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
#以盒子为参考点
一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
如下：（子绝父相）
以下几点需要注意。
（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
<div class="box1"> 相对定位
<div class="box2"> 没有定位
<p></p> 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
</div>
</div>
再比如：
<div class="box1"> 相对定位
<div class="box2"> 相对定位
<p></p> 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
</div>
</div>
（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
工程应用：
“子绝父相”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
（3）绝对定位的儿子，无视参考的那个盒子的padding：
下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位，那么， p将无视父亲的padding，在border内侧为参考点，进行定位：
工程应用：
绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。
现在有如下两张图片素材：
要求作出如下效果：
代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
margin: 100px;
width: 308px;
height: 307px;
border: 1px solid #FF7E00;
position: relative; /*子绝父相*/
}
.box .image img{
width: 308px;
height: 196px;
}
.box .dtc{
display: block; /*转为块级元素，才能设置span的宽高*/
width: 52px;
height: 28px;
background-image: url(http://img.smyhvae.com/20180116_1115.png);
background-position: -108px 0px; /*这里用到了精灵图*/
position: absolute; /*采用绝对定位的方式，将精灵图盖在最上层*/
top: -9px;
left: 13px;
}
.box h4{
background-color: black;
color: white;
width:308px;
height: 40px;
line-height: 40px;
position: absolute;
top: 156px;
}
</style>
</head>
<body>
<div class="box">
<span class="dtc"></span>
<div class="image">
<img src="http://img.smyhvae.com/20180116_1116.jpg" alt="">
</div>
<h4>广东深圳宝安区建安一路海雅缤纷城4楼</h3>
</div>
</body>
</html>
代码解释如下：
为了显示“多套餐”那个小图，我们需要用到精灵图。
“多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。
代码的效果如下：
#让绝对定位中的盒子在父亲里居中
我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
div {
width: 600px;
height: 60px;
position: absolute; 绝对定位的盒子
left: 50%; 首先，让左边线居中
top: 0;
margin-left: -300px; 然后，向左移动宽度（600px）的一半
}
如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。
我们可以总结成一个公式：
left:50%; margin-left:负的宽度的一半
#固定定位
固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
备注：IE6不兼容。
用途1：网页右下角的“返回到顶部”
比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。
<style type="text/css">
.backtop{
position: fixed;
bottom: 100px;
right: 30px;
width: 60px;
height: 60px;
background-color: gray;
text-align: center;
line-height:30px;
color:white;
text-decoration: none; /*去掉超链接的下划线*/
}
</style>
**用途2：**顶部导航条
我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。
需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。
顶部导航条的实现如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/*为什么要写这个？*/
/*不希望我们的页面被nav挡住*/
padding-top: 60px;
/*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/
_padding-top:0;
}
.nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
z-index: 99999999;
}
.inner_c{
width: 1000px;
height: 60px;
margin: 0 auto;
}
.inner_c ul{
list-style: none;
}
.inner_c ul li{
float: left;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
}
.inner_c ul li a{
display: block;
width: 100px;
height: 60px;
color:white;
text-decoration: none;
}
.inner_c ul li a:hover{
background-color: gold;
}
p{
font-size: 30px;
}
.btn{
display: block;
width: 120px;
height: 30px;
background-color: orange;
position: relative;
top: 2px;
left: 1px;
}
</style>
</head>
<body>
<div class="nav">
<div class="inner_c">
<ul>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
</ul>
</div>
</div>
</body>
</html>
#5、z-index属性：
z-index属性：表示谁压着谁。数值大的压盖住数值小的。
有如下特性：
（1）属性值大的位于上层，属性值小的位于下层。
（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
针对（1）（2）（3）条，举例如下：
这是默认情况下的例子：（div2在上层，div1在下层）
现在加一个z-index属性，要求效果如下：
第五条分析：
z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是层级的应用。
层级：
（1）必须有定位（除去static）
（2）用z-index来控制层级数。
css 08-CSS属性：定位属性的更多相关文章
- CSS学习笔记：定位属性position
目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...
- CSS布局浮动和定位属性的区别
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果. position: ...
- CSS样式----CSS属性：字体属性和文本属性（图文详解）
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- 对css中的定位属性postion刨根解牛
定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常 ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- CSS属性：定位属性（图文详解）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS（八）：定位属性
一.position属性 1.relative(相对定位) 相对它原来的位置,通过指定偏移,到达新的位置. 扔在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 看下面的例子: <!DOCTY ...
随机推荐
- 在FL Studio中如何更好地为人声加上混响（进阶教程）
为人声加上混响是我们在处理人声过程中必不可少的一步.然而,除了直接在人声混音轨道加上混响插件进行调节以外,这里还有更为细节的做法可以达到更好的效果. 步骤一:使用均衡器 在为人声加上混响之前,我们应该 ...
- jmeter脚本的编写
前几天讲到了性能测试的入门,今日继续来讲解jmeter的使用,本文讲的都是比较细,希望各位耐心的看完. 一.jmeter的安装与打开 前提条件:给大家一个jmeter的安装包 百度网盘的路径如下:链 ...
- 9、Spring Boot安全
1.Spring Security简介 Spring Security是针对Spring项目的安全框架,也是Spring Boot底层安全模块默认的技术选型.他可以实现强大的web安全控制.对于安全控 ...
- 多元Huffman编码变形—回溯法
一.问题描述 描述 在一个操场的四周摆放着n堆石子.现要将石子有次序地合并成一堆.规定在合并过程中最多可以有m(k)次选k堆石子合并成新的一堆,2≤k≤n,合并的费用为新的一堆的石子数.试设计一个算法 ...
- [Android systrace系列] systrace的信息从哪里来
-------------------------------------------------------------- 这篇文章的小目标: 1. systrace是怎么抓出来的 2. 这些信息的 ...
- uni-app 封装接口request请求
我们知道一个项目中对于前期架构的搭建工作对于后期的制作有多么重要,所以不管做什么项目我们拿到需求后一定要认真的分析一下,要和产品以及后台沟通好,其中尤为重要的一个环节莫过于封装接口请求了.因为前期封装 ...
- Spring Cloud 学习 (十) Spring Security, OAuth2, JWT
通过 Spring Security + OAuth2 认证和鉴权,每次请求都需要经过 OAuth Server 验证当前 token 的合法性,并且需要查询该 token 对应的用户权限,在高并发场 ...
- 并发编程实战-J.U.C核心包
J.U.C - AQS java.util.concurrent(J.U.C)大大提高了并发性能,AQS 被认为是 J.U.C 的核心.它核心是利用volatile和一个维护队列. AQS其实就是ja ...
- AtomicInteger的addAndGet(int delta)与getAndAdd(int delta)有什么区别？
结论:区别仅在于返回的结果,修改的值是相同的,但是返回的值不同. 看一下源码注释 1 /** 2 * Atomically adds the given value to the current va ...
- DDD（领域驱动设计）--战术设计
前言 战术设计 战略设计为我们提供一种高层视野来审视我们的软件系统,主要包括领域/子域.通用语言.限界上下文和架构风格等概念, 而战术设计则将战略设计进行具体化和细节化,它主要关注的是技术层面的实施, ...