二.6 页面化妆师CSS之CSS定位（position）

最新推荐文章于 2020-02-20 21:38:14 发布

测试小弟

最新推荐文章于 2020-02-20 21:38:14 发布

阅读量356

点赞数 1

分类专栏：五、前端

本文链接：https://blog.csdn.net/qq_44891948/article/details/104284258

版权

五、前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.CSS-position

2.Positioned Layout Module：提供与元素定位和层叠相关功能，他是核心模块

1.CSS-position

学习CSS中的定位模型
使用定位模型来达到布局目的
学习position之static
学习position之relative
学习position之absolute
学习position之fixed
学习position之sticky

2.Positioned Layout Module：提供与元素定位和层叠相关功能，他是核心模块

3.定位模型

static 自然模型
relative 相对定位模型
absolute 绝对定位模型
fixed 固定定位模型
sticky 磁贴定位模型

3.1CSS-position属性

3.2position之static

静态定位/常规定位/自然定位------定位中的一股清流-回归本真
作用：是元素定位与常规/自然流中（块、行垂直排列下去、行内水平从左到右）
特点：
1. 忽略top，bottom，left，right或者z-index声明
2. 两个相邻的元素如果都设置了外边距，那么最终外边距=两者外边距中最大的
3. 具有固定width和height的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大沾满剩余宽度，造成的效果就是这个快水平居中。

3.3position之relative

相对定位
作用：是元素称为containing-block-官话是可定位的祖先元素
特点
- 可以使用top/right/bottom/left/z-index进行相对定位——？相对的是谁
- 相对定位的元素不会离开常规流——心念家乡
- 任何元素都可以设置为relative，他的绝对定位的后代都可以相对于它进行绝对定位——超好用
- 可以使用浮动元素发生偏移，并控制他们的堆叠顺序

3.4position之absolute

绝对定位
作用：使元素脱离常规流
特点
- 脱离常规流
- 设置尺寸要注意：百分比比的是谁？——最近定位祖先元素
- lrb如果为0, 他将对其道最近定位祖先元素的各边——衍生出一个居中妙计
- lrtb如果设置为auto，它将被打回原形
- 如果没有最近定位祖先元素，会认 body 做跌跌
  如果元素没有已定位（除static定位以外）的祖先元素，那么他的位置相对于最初的包含块
- z-index可以控制堆叠顺序999999见过吧？

3.5position之fixed

固定定位
作用：我跟绝对定位本事永根生相煎何太急
特点
- 跟absolute有啥区别？相对与谁做绝对定位
- 固定定位元素不会随着视口滚动而滚动
- 继承absolute特点

3.6position之sticky

此贴定位/粘性定位/吸附定
作用：relative_fixed的完美结合，制造出吸附效果
特点：
- 如果产生偏移，原位置还是会在常规流中
- 如果他的租金祖先有滚动，那么他的便宜标尺就是最近祖先元素
- 如果最近祖先元素没有滚动，那么他的偏移标尺是视口
- 上下左右的偏移规则

4.总结：

5.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css1.css" type="text/css">
</head>
<body>
    <div class="div0">
        <div class="div1">
            <div class="div2">6</div>
            <img class="img1" src="1.jpg" >
        </div>
    </div>
</body>
</html>

.div0{
    width: 500px;
    height: 300px;
    position: relative;
    background-color: magenta;
    top:150px;
    left: 300px;
}
.img1{
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 10px;
    right: 30px;
}
.div1{
    width: 300px;
    height: 200px;
    background-color: #1b2f90;
    top: 50px;
    left: 100px;
    position: absolute;
}
.div2{
    width: 30px;
    height: 45px;
    background-color: #5cd053;
    border-radius: 20px/30px;
    text-align: center;
    line-height: 45px;
    color: white;
    top:-10px;
    left: -10px;
    position: absolute;
}