CSS(8)---通俗讲解定位(position)
通俗讲解定位(position)
CSS有三种基本的定位机制: 普通流、浮动、定位。前面两个之前已经讲过，详见博客：
一、为什么要用定位？
如果说浮动关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。
我们来思考下定位用于的场景。
1、打Log标签
比如你想在商品的图片想打个标签比如：包邮、最新上架等等。
怎么做比较好呢，如果你要粗暴那就直接ps在图片上添加标签。只是这样有个很大的弊端，比如你要添加新标签你需要重现修图，比如商品之前包邮后面不包邮了，
那你又需要重新p图。这样肯定是不合适的。那怎么做比较合适？
其实很简单，将商品图片和标签的标签分开来。然后通过css在商品图片上添加标签。这个时候通常会定位去完成。
2、切换Banner
有些商城的首页都会有个Banner，这里 左右的箭头 和 下面的小点点一般也是用定位来做。
3、广告位窗口
有些位置在左右侧会有固定的广告窗口，不论怎么滑动页面这个广告窗口都是在固定位置
这个就需要用到固定定位了。
二、定位概念
1、定位的分类
在CSS中，position 属性用于定义元素的定位模式，其基本语法格式如下：
选择器 {position:属性值;}
属性值
这里还有个概念就是 边偏移 因为你定位肯定要指定定位在哪里，所以需要通过 边偏移 来指定。
所以定位是要和边偏移搭配使用的。不过对于static(静态定位)设置边偏移是无用的。
2、静态定位(static)
static 是此属性的默认值。这时候，我们称那个元素没有被定位。简单来说就是网页中所有元素都默认的是静态定位。 其实就是标准流的特性。
所以如果需要使用定位那这里就不能是这个默认值了。
注意 在静态定位状态下，此时 top, right, bottom, left 和 z-index 属性无效。
3、相对定位(relative)
它的主要特点如下
1、 参照元素原来的位置进行移动。
2、 通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。
3、 元素原有的空间位保留。
4、 元素在移动时会盖住其他元素。
举例说明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
#one {
width: 120px;
height: 120px;
background: #E19D59;
}
#two {
width: 120px;
height: 120px;
background: #FF0000;
position: relative; /*设置相对定位*/
left: 20px; /*设置距离左边偏移位置*/
top: 20px; /*设置距离顶部偏移位置*/
}
#three {
width: 120px;
height: 120px;
background: #008000;
}
</style>
</head>
<body>
<div id="one">div1</div>
<div id="two">div2</div>
<div id="three">div3</div>
</body>
</html>
运行结果
通过我们这个示例我们可以看出
1、它的左右,上下边偏移的量是根据这个div2原始位置基础上进行移动的。
2、这个div2它还是个标准流，并没有浮起来，所以这个位置它还是占有的。(如果div2浮动那么div3就会向上移动，这里显然没有)
3、当它偏移后 如果和其它元素有重叠，它会覆盖其它元素。（div2覆盖了部分div3元素）
作用 我的理解相对定位主要用途是用来给绝对定位的一个盒子。（下面会解释这句话）
4、绝对定位absolute
特点
1、参照距离他最近的有定位属性的父级元素进行移动
2、通过"left"、 "top"、 "right"、 "bottom" 属性进行定位
3、元素完全脱离文档流，原有位置不再保留
4、元素在移动时会盖住其他元素
5、一般我们设置绝对定位时，都会找一个合适的父级将其设置为相对定位。最好为这个具有相对定位属性的父级设置宽高
举例说明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 400px;
height: 400px;
margin: 100px;
/* position: relative;*/
background: yellow;
}
#bd1{
width: 120px;
height: 120px;
background: #E19D59;
}
#bd2{
width: 120px;
height: 120px;
background: #FF0000;
position: absolute;
left: 20px;
top: 20px;
}
#bd3{
width: 120px;
height: 120px;
background: #008000;
}
</style>
</head>
<body>
<div id="father">
<div id="bd1">div1</div>
<div id="bd2">div2</div>
<div id="bd3">div3</div>
</div>
</body>
</html>
运行结果
从这幅图可以看出一点
这里因为父div没有设置定位，所以它的位置是相对于body进行边偏移。
这个时候我们将父标签设置 position: relative;
再刷新页面
从这张图很直观看到:
1、因为父div设置了定位，所以这里的边偏移变成都是相对于父div进行偏移（正常贴标签就是这样）
2、我们可以看出当设置绝对定位后，该元素已经脱离文档流，已经浮上来了（因为div2上浮所有div3才会上移）
3、元素在移动时会盖住其他元素 （div2覆盖了部分div3）
5、固定定位(fixed)
特点
1、以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位
2、通过"left"、 "top"、 "right"、 "bottom" 属性进行定位
3、元素完全脱离文档流，原有位置不再保留
4、元素不会随着文档流的滑动而滑动
固定定位最大的特点就是第一点，可以理解成它是以可视区域为准，会一直显示在可视区域，屏幕滑动也会显示在定位的位置。
6、四种定位总结
还有比较重要的三点
定位模式转换
跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都自动转换为 行内块元素。
绝对定位的盒子水平/垂直居中
注意 普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了。
定位的盒子也可以水平或者垂直居中，有一个算法(下面会举例说明)。
1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。
子绝父相
这句话的意思是 子级是绝对定位的话,父级要用相对定位。
为什么会有这个概念，那是因为绝对定位的边偏移特点是
如果父元素没有设置定位，那么它的位置是相对于body进行边偏移。如果父元素设置定位，那就根据父元素偏移。
一般我们肯定是希望根据父元素偏移。就好比图片打标签，不可能跟着body偏移而是父元素进行定位。而且父元素相对定位最大的好处就是它会占有位置，因此父亲最好是 相对定位。
三、经典示例
1、打上log标记
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>log标签</title>
<style>
div {
width: 310px;
height: 190px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative; /*父选择相对定位*/
}
.top {
position: absolute; /*子取相对定位*/
top: 0; /*位置 左上*/
left: 0;
}
</style>
</head>
<body>
<div>
<img src="images/log.jpg" alt="" class="top"> <!-- log的图片 -->
<img src="images/goods.jpg" height="190" width="310" alt=""> <!-- 商品图片，长和宽和父div大小一致 -->
</div>
</body>
</html>
运行结果就是上面的最终结果。
2、定位水平居中
加了定位 浮动的的盒子 margin 0 auto 失效了
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
/*加了定位 浮动的的盒子 margin 0 auto 失效了*/
left: 50%;
margin-left: -100px; /*减去总宽度一般*/
top: 50%;
margin-top: -100px; /*减去总高度一般*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这个这个div就处于整个页面的居中了，这里我们来说明下下面这两个的意思
left: 50%;
margin-left: -100px; /*减去总宽度一般*/
3、轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tb {
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;
position: relative;
}
.tb a {
width: 24px;
height: 36px;
display: block;
position: absolute;
top: 50%;
margin-top: -18px;
}
.left {
left: 0;
background: url(images/left.png) no-repeat;
}
.right {
right: 0;
background: url(images/right.png) no-repeat;
}
.tb ul {
width: 70px;
height: 13px;
background: rgba(255, 255, 255, .3);
position: absolute; /* 加定位*/
bottom: 18px;
left: 50%; /*水平走父容器的一半*/
margin-left: -35px; /*左走自己的一半*/
border-radius: 8px;
}
.tb ul li {
width: 8px;
height: 8px;
background-color: #fff;
float: left;
margin: 3px;
border-radius: 50%;
}
.tb .current {
background-color: #f40;
}
</style>
</head>
<body>
<div class="tb">
<img src="images/tb.jpg" >
<a href="#" class="left"></a>
<a href="#" class="right"></a>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
运行结果
参考
1、w3school之CSS 定位 (Positioning)
```
你如果愿意有所作为，就必须有始有终。(10)
```
CSS(8)---通俗讲解定位(position)的更多相关文章
- [转载]CSS教程:实例讲解定位Position
http://www.missyuan.com/thread-395406-1-1.html 1. position:static 所有元素的默认定位都是:position:static,这意味着元素 ...
- CSS(6)---通俗讲解浮动(float)
CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...
- CSS(7)--- 通俗讲解清除浮动
CSS(7)--- 通俗讲解清除浮动 上一篇讲了CSS浮动 博客地址:CSS(6)---通俗讲解浮动(float) 一.理解清除浮动 1.为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效 ...
- CSS 浮动(float)与定位(position)
一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ ...
- CSS(5)---通俗讲解盒子模型
CSS(5)---盒子模型 盒子模型四个关键字:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 一.概念 1. 概念 盒子 ...
- CSS浮动通俗讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 验分享：CSS浮动(float,clear)通俗讲解
经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...
- web前端css定位position和浮动float
最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
随机推荐
- Cocos2d-x 学习笔记(18) Label
1. 简介 Label直接继承了Node LabelProtocol BlendProtocol,用于渲染文本,让文本呈现的效果丰富. Label有4种类型,: enum class LabelTyp ...
- Codeforces Round #426 The Meaningless Game
题目网址:http://codeforces.com/contest/834/problem/C 题目: C. The Meaningless Game Slastyona and her loyal ...
- 图像处理笔记（二十）：LAWS纹理滤波应用于缺陷检测
LAWS纹理滤波 texture_laws(Image, 原图像 ImageTexture, 输出值,滤波后图像 FilterType, 过滤器类型 Shift, 灰度值转换,滤波后的灰度值可能会比较 ...
- pytest1-Installation and Getting Started
pytest是python的一种单元测试框架(非自带,需要安装),与python自带的unitest测试框架相比,使用起来更加简洁.效率更高.总之,一句话,pytest优于unitest. 1.安装p ...
- linux "No space left on device" 磁盘空间解决办法
某年某月某日某时,某人在工作中设置crontab定时任务规则保存时,提示“No space left on device”,此时用df -h检查磁盘,发现还有剩余空间.请问是什么原因及如何排查?什么会 ...
- vue系列---Mustache.js模板引擎介绍及源码解析(十)
mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...
- The usage of Markdown---链接的使用
目录 1. 序言 2. 网页链接 3. 图片链接 4. 页内跳转 更新时间:2019.09.14 1. 序言 在编辑文章的时候,我们常常需要插入各种链接,比如说网页链接,图片链接等等.当文章篇幅过 ...
- dig-基本使用
dig:Domain Information Groper,是一个DNS查询工具 1:使用google的域名服务器:查询特定域名的A记录 [root@localhost ~]# dig @8.8.8. ...
- SpringBoot2.1.9+dubbo2.7.3+Nacos1.1.4构建你的微服务体系
简单几步使用最新版本的DUBBO构建你的微服务体系 NACOS注册中心 从github下载最新版本的nacos 上传至服务器并解压 单机启动sh startup.sh -m standalone na ...
- MySQL查询-分组取组中某字段最大（小）值所有记录
最近做东西的时候,用到一个数据库的查询.将记录按某个字段分组,取每个分组中某个字段的最大值的所有记录.举栗子来说. 已知分数表“score”,包含字段“id", "name&quo ...