定位

定位

1.相对定位 : 相对于原来的位置进行指定的偏移

**positon : relative; 决定定位类型 **

top 、bottom、left、right 决定相对位移方向


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位title>
    
    <style>
        div{
      
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 30px;
        }
        #father{
      
            border: 1px solid red;
        }
        #father:after{
      
            content: '';
            display: block;
            clear: both;
        }
        #first{
      
            border: 1px solid green;
            position: relative;/*相对定位 : 上下左右*/
            top : -20px;/* //相对于上,位移 -20px*/
            left : 20px ; /*//相对于左, 位移20px——> 向右位移20px*/
        }
        #second{
      
            border: 1px solid orange;
        }
        #third{
      
            border: 1px solid purple;
        }
    style>
head>
<body>
<div id="father">
<div id="first">1div>
<div id="second">2div>
<div id="third">3div>
div>
body>
html>

2.绝对定位

**positon : absolute; 决定定位类型 **

top 、bottom、left、right 决定相对位移方向

  1. 没有父元素 ,基于 浏览器定位偏移
  2. 有父元素,父级元素存在relative定位, 则相对于父级元素定位偏移

绝对定位不在 标准文档流 , 原来的位置不会保存

3.固定定位

positon : fixed; 决定定位类型

固定定位无论如何不会发生偏移

4.z-index

层级关系

用途 : 利用层级可以让位置重叠的元素明显地具有层级关系


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-indextitle>
    <link rel="stylesheet" href="style.css">
head>
<body>
<div id="content">
    <ul>
        <li><img src="./1.png" alt="">li>
        <li class="tipText">点击进入li>
        <li class="tipBag">li>
        <li>时间:2021-05-15li>
    ul>
div>
body>
html>
#content{
     
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 18px;
    line-height: 25px;
    border : 1px solid blue;
}
ul,li{
     
    padding: 0px;
    margin : 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
     
    position: relative;
}
.tipText,.tipBag{
     
    position: absolute;
    width: 130px;
    height: 25px;
    top: 80px;
}
.tipBag{
     
    background-color: black;
    opacity: 0.5; /*半透明效果*/
}
.tipText{
     
    color: white;
    z-index: 999;  /*让该层级放在其他层级上面*/
}

背景透明度

opacity : 0~1 ; //0-1 表示透明度

你可能感兴趣的:(前端)