Learn CSS Positioning

Three mechanisms of a CSS layout

1. Standard flow

2. float (float box departing from the standard flow horizontally arranged boxes)

3. Location (the box set at a position other free floating in the box positioned above css inseparable particular effects js)

Why use two positioning

To achieve the above results, do not use position is very difficult

The cassette set in one position, a free floating in the other case (including standard flow and float above)

So we should have in mind down the order of three layout mechanism

Box> floating in the intermediate layer - - Standard stream (bottom)> Box located in the uppermost layer

Detailed Three Locations

Location is used to layout, consisting of two parts

= + Side positioned offset positioning mode

1> Edge Bias

In CSS offset by side top bottom right left attribute definition element

Positioning box with side offset value under normal circumstances have targeted places where there are side offset

2> positioning mode (positioning classification)

Positioned in the CSS mode position property syntax element defined in

Selector {position: Property Value}

Positioning mode is different classifications in different situations we use a different location mode

1: static positioning (static) understand

Static positioning is the default positioning element positioning means no way equivalent to border there is no positioning attribute of none

Static position according to the standard flow characteristics placement no edge offset

Static positioning in the layout we are almost unused

2: Relative positioning (relative) important

It is positioned opposite the element relative to its original position for the

The relative positioning of features:

Relative to their original position

The original possession in the standard flow position continued to occupy the back of the box is still a standard flow approach to it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对定位</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            
        }
        .two {
            background-color: purple;
            /* 定位 = 定位模式 + 边偏移 */
            /* 虽然盒子走了 但是在标准流中仍然还有他的位置 没有脱标 */
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="two"></div>
    <div></div>
</body>
</html>

3:绝对定位(absolute)-重要

绝对定位是元素以带有定位的父级元素来移动位置

父级元素没有定位就以浏览器为标准定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位</title>
    <style>
        .father {
            width: 350px;
            height: 350px;
            background-color:pink;
            margin: 100px;
            /* 标准流的盒子 总是以父级为准移动位置 */
            /* 绝对定位 如果父级没有定位 那么绝对定位的盒子 会以我们文档为准 
            浏览器为准移动位置 离自己最近的已经定位的为准 */
            /* 如果有一下代码 则以父亲为准移动位置 */
            /* position: relative; */
        }

        .son {
            /* 如果父级没有定位 则以浏览器为标准 */
            width: 200px;
            height: 200px;
            background-color: purple;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>
</html>

绝对定位的特点

是以带有定位的父级元素来移动位置如果父级没有移动则以浏览器文档为标准移动

不保留原来的位置完全是脱标的

定位的口诀

子绝父相 :子级是绝对定位父级要用相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子绝父相</title>
    <style>
        .up {
            position: relative;
            width: 1000px;
            height: 90px;
            background-color: pink;
            
        }

        .down {
            width: 1000px;
            height: 150px;
            background-color: #000;
        }
        .arr-left {
            position: absolute;
            top: 25px;
            left: 0;
            width: 40px;
            height: 40px;
            background-color: purple;

        }
        .arr-right {
            position: absolute;
            top: 25px;
            right: 0;
            width: 40px;
            height: 40px;
            background-color: purple;
        
        }
    </style>
</head>
<body>
    <div class="up">
        <img src="../images/img.jpg" alt="">
        <div class="arr-left"></div>
        <div class="arr-right"></div>
    </div>
    <div class="down"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 310px;
            height: 190px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 10px;
            position: relative;
        }
        .top {
            position: absolute;
            top: 0;
            left: 0;
        }

        .bottom {
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <img class="top" src="../images/top_tu.gif" alt="">
        <img src="../images/adv.jpg" alt="">
        <img class="bottom" src="../images/br.gif" alt="">
        
    </div>
</body>
</html>

4:固定定位(fixed) 重要

固定定位时绝对定位的一种特殊形式。

1 完全脱标--完全不占位置

2 只认浏览器窗口+边偏移属性来设置元素的位置

跟父元素没有任何关系不随滚动条滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;background-color: pink;
            margin: 100px auto;
        }
        /* 逃出盒子 固定定位和父亲没关系 只认浏览器的可视区域*/
        .box img {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../images/sun.jpg" alt="" width="150px">
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪广告固定定位</title>
    <style>
        .box {
            width: 1002px;
            margin: 0 auto;
        }
        .ad-l {
            position: fixed;
            left: 0;
            top: 180px;
        }
        .ad-r {
            position: fixed;
            right: 0;
            top: 180px;
        }
    </style>
</head>
<body>
    <img class="ad-l" src="../images/ad-l.png" alt="">
    <img class="ad-r" src="../images/ad-r.png" alt="">
    <div class="box">
        <img src="../images/box.png" alt="">
    </div>
</body>
</html>

5 定位(position)的扩展

>1 绝对定位的盒子居中

注意：绝对定位固定定位的盒子不能通过设置 margin :auto 设置水平居中

在使用绝对定位中要实现水平居中可以使用 left:50% 在左移自身宽度的一半来实现居中

第一步. left:50px 第二步margin-left: 负盒子的一半宽度

垂直居中

第一步 top:50% 第二步 margin-top 负盒子的一半高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位盒子居中</title>
    <style>
        .box {
            position: absolute;
            /* 第一步 */
            left: 50%;
            /* 第二步 */
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

>2 堆叠顺序(z-index)

在使用定位布局时可能会出现盒子重叠的情况

加了定位的盒子默认后来者居上后面出现的盒子会压在前面出现的盒子上

使用z-indexc层叠等级属性可以调整盒子的堆叠书序如下图所示

z-index 的特性如下

1.属性值：正整数负整数或者 0 默认是0 数值越大盒子越靠上

2.如果属性值相同则按照书写顺序后来居上

z-index 只能应用于相对定位绝对定位固定定位里面其他标准流浮动静态定位无效

3>定位改变display属性

display 是限时模式可以改变下显示模式的方式如下

1.可以使用inline-block 转换为行内块元素

2.可以用浮动float默认转换为行内块元素 (类似并不完全一样浮动是脱标的)

3.绝对定位和固定定位也和浮动类似默认转换特性转换为行内块

所以说一个行内元素如果加了浮动固定定位绝对定位就可以接受宽高