css定位

作者: fanison | 来源:发表于2019-11-28 20:07 被阅读0次

css定位
CSS 定位
CSS 定位 (Positioning)
css 定位浮动
CSS定位
CSS中的几种定位
CSS 定位
图片精灵
元素定位
CSS定位与浮动2016/6/12

1.div的分层

background < border

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

.demo{
  width:100px;
  height:100px;
  border:10px solid rgba(255,0,0,0.5);
  background-color: green;
}

border < 块级子元素

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

.demo{
  width:100px;
  height:100px;
  border:10px solid rgba(255,0,0,1);
  background-color: green;
}
.childDiv{
  background-color: white; 
  height:50px;
}

块级子元素 < 浮动元素

  <div class="demo">
    <div class="float"></div>
    <div class="childDiv">
    </div>
  </div>

.demo{
  width:100px;
  height:100px;
  border:10px solid rgba(255,0,0,1);
  background-color: green;
}
.childDiv{
  height:50px;
  background-color: white; 
}
.float{
  float:left;
  height:20px;
  width:20px;
  background-color: black; 
}

浮动元素 < 内联子元素

  <div class="demo">
    <div class="float"></div>
    <span class="text">内联子元素</span>
    <div class="childDiv">
    </div>
  </div>

.demo{
  width:200px;
  height:200px;
  border:10px solid rgba(255,0,0,1);
  background-color: green;
}
.childDiv{
  height:50px;
  background-color: white; 
}
.float{
  float:left;
  height:50px;
  width:50px;
  background-color: black;
}
.text{
  color:red;
  margin-left:-30px;
}

结论：Demo

2.position

static 默认值，待在文档流
relative 相对定位，升起来，但不脱离文档流
absolute 绝对定位，定位基准是祖先元素中最近的非static
fixed 固定定位，定位基准是viewport
sticky 粘滞定位

position:relative

  <div class="container">
    <div class="demo"></div>
    <div class="demo2"></div>
  </div>

.demo{
  border:1px solid green;
  background-color: green;
  width:50px;
  height:50px;
  position:relative;
  top:10px;
  left:10px;
}
.demo2{
  width:50px;
  height:50px;
  background-color: black;
}

z-index

z-index：auto为默认值，不创建新层叠上下文
z-index：0/1/2
z-index：-1/-2

.demo{
  position:relative;
}
.demo2{
  position:relative;
  z-index:-1;
}

position:absolute

脱离原来位置，另起一层（比如对话框关闭按钮）

  <div class="container">
    <span class="close">X</span>
  </div>

.container{
  border:1px solid red;
  height:400px;
  position:relative;
}
.close{
  position:absolute;
  top:0;
  right:0;
  padding:2px 8px;
  background-color: grey;
  color:white
}

鼠标提示

    <button>
      点击
      <span class="tips">提示内容</span>
    </button>

button{
  position:relative;
}
button > .tips{
  position:absolute;
  border:1px solid green;
  white-space:nowrap;
  bottom:calc(100% + 10px);
  left:50%;
  transform: translateX(-50%);
}
button > .tips{
  display:none;
}
button:hover > .tips{
  display:inline-block;
}

position:fixed

 <div class="container">
    <div class="fixed"></div>
 </div>

.container{
  border:1px solid red;
  height:400px;
}
.fixed{
  position:fixed;
  width:50px;
  height:50px;
  background-color: red;
  bottom:200px;
  left:10px;
}

position:sticky

.sticky{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  border:1px solid green;
  background-color: red;
}

1.gif

3.层叠上下文

创建层叠上下文

文档根元素（<html>）
position值为 absolute或 relative且 z-index值不为 auto 的元素；
opacity 属性值小于 1 的元素
transform属性值不为 none 的元素
flex容器的子元素，且 z-index]值不为 auto；

<div class=container>
  <div class="a"> 
    <div class="a2">10</div>
  </div>
  <div class="b">
    <div class="b2">5</div>
  </div>
</div>

.container{
  border: 1px solid black;
  height: 200px;
  background: white;
  position: relative;
}
.a{
  border: 1px solid red;
}
.a2{
  position: relative;
  z-index: 10;
  height: 50px;
  width: 50px;
  background: red;
  color:white;
}
.b{
  border: 1px solid green;
}
.b2{
  position: relative;
  z-index: 5;
  height: 50px;
  width: 50px;
  top:-20px;
  background: blue;
  color:white;
  font-size:30px;
}

负z-index

`负z-index无法脱离层叠上下文`

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

.demo{
  background: rgb(0,255,255);
  width: 200px;
  height: 200px;
  padding: 10px;
  position: relative;
  z-index:0;
}
.demo > .div{
  height: 50px;
  background: red;
  position: relative;
  z-index: -1;
}