CSS (8) --- explain the popular positioning (position)
There are three basic CSS positioning mechanisms: 普通流, 浮动, 定位. Before the two already mentioned, see blog:
1, CSS (5) --- popular explanation box model
2, CSS (6) --- Popular explain float (float)
3, CSS (7) --- popular explanation Clear float
First, why should locate?
If the float key in a "floating" above the word, then our position, the key is a "bit."
We have to think about positioning for the next scene.
1, playing Log tag
For example, you want to want to make a picture of goods labels such as: free shipping, new shelves, and so on.
How to do a better arrangement, it would be rude if you want to add tags directly on a picture ps. There is just so great disadvantages, for example, you want to add a new label you need to reproduce retouching, such as before shipping the goods back free shipping,
Then you may also need to re-map p. This is certainly not appropriate. How to do that more appropriate?
Actually very simple, to distinguish the product label images and labels. Then add the labels on the product images through css. This time is usually positioned to complete.
2, the switching Banner
Some of the mall's home page will have a Banner, where the left and right arrows and following a small bit general is to do with positioning.
3, window advertising
Some have a fixed position on the left and right side of the window advertising, no matter how windows are sliding page ad in a fixed position
The need to use a fixed positioning.
Second, the concept of positioning
1, the positioning of classification
In CSS, positionattributes to define elements for positioning mode, the basic syntax is as follows:
选择器 {position:属性值;}属性值
There is also a concept that is 边偏移because you certainly have to specify locate locate where it is required by the side of the offset to be specified.
所以定位是要和边偏移搭配使用的。不过对于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)