定位

一、absolute

HTML

<div class="demo"></div>
<div class="box"></div>

1.脱离原来位置进行定位 层模型
2.相对于最近的有定位的父级进行定位，如果没有则相对于文档进行定位
3.一般用absotive进行块的定位

CSS

.demo{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0.5;**opacity是透明度属性**
}
.box{
    width: 150px;
    height: 150px;
    background-color: green;
}

二、relative

HTML

<div class="demo"></div>
<div class="box"></div>

1.保留原来位置进定位
2.相对自己原来的位置进行定位
3.一般用relative做参照物定位

CSS

.demo{
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0.5;**opacity是透明度属性**

}
.box{
    width: 150px;
    height: 150px;
    background-color: green;
}

三、absolute和relative的参照物举例

HTML

<div class="wrapper">
        <div class="content">
                <div class="box">
                </div>
    </div>
</div>

什么属性都不加的原始图样

什么属性都不加的原始图样.jpg
1.第一种情况：给内容加absolute，每个父级元素都不加position属性值，内容的参照物选择浏览器边界

CSS

.wrapper{
    margin-left: 100px;
    width: 200px;
    height: 200px;
    background-color: orange;
}
.content{
    margin-left: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}
.box{
    position: absolute;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: yellow;
}

第一种情况.jpg

2.第二种情况：给内容加absolute，给相邻的父级元素添加position属性值，内容的参照物选择添加了position属性值的相邻父级元素

CSS

.wrapper{
    margin-left: 100px;
    width: 200px;
    height: 200px;
    background-color: orange;
}
.content{
    position: relative;
    margin-left: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}
.box{
    position: absolute;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: yellow;
}

第二种情况.jpg
3.第三种情况：给内容加absolute，给最外层的父级元素添加position属性值，其他的父级元素不加，内容的参照物选择最近的添加了position属性值的父级元素

CSS

.wrapper{
    position: relative;
    margin-left: 100px;
    width: 200px;
    height: 200px;
    background-color: orange;
}
.content{
    margin-left: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}
.box{
    position: absolute;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: yellow;
}

第三种情况.jpg
4.第四种情况：给内容加relative，其他的父级元素随便加或者不加，内容都只是相对于自己出生的位置进行变化

CSS

.wrapper{
    margin-left: 100px;
    width: 200px;
    height: 200px;
    background-color: orange;
}
.content{
    margin-left: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}
.box{
    position: relative;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: yellow;
}

第四种情况.jpg

四、fixed广告定位属性

如何拉滚动条，块都保持在页面的同一位置
HTML

<div class="middle"> 
拉动滚动条，缩放页面大小，块始终在页面居中位置实例
</div>

CSS

.middle{
    position: fixed;
    left: 50%;/*左边距离浏览器最左侧的距离是页面宽度的50%*/
    top: 50%;/*上边距离浏览器最上侧的距离是页面宽度的50%*/
    width: 100px;
    height: 100px;
    background-color: red;
    margin-left: -50px;/*回退半个width*/
    margin: -50px; /*回退半个height*/
}