CSS基础03

定位

定位 --> 基于xxx定位 上下左右

相对定位

    <!--  相对定位
    相对于自己原来的位置进行偏移
    -->

#first{
    background-color: yellow;
    border: 1px dashed #d56b6b;
    position: relative;  /*相对定位:  上下左右*/
    top: -20px;
    left: 20px;
}
#second{
    background-color: greenyellow;
    border: 1px dashed rgba(81, 111, 144, 0.66);
    position: relative;
    bottom: -10px;
    right: 20px;
}

相对定位 --> position: relative;

相对于自己原来的位置,进行指定的偏移 相对定位的话,仍然在标准文档流中 原来的位置会被保留

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

绝对定位

  1. 在没有父级元素定位的前提下, 相对于浏览器定位
  2. 假设父级元素存在定位, 我们通常会相对于父级元素进行偏移
  3. 在父级标准范围内移动

相对于父级或者浏览器的位置,进行指定的偏移 , 绝对定位的话, 它不在在标准文档流中 原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: yellow;
            border: 1px dashed #d56b6b;
        }
        #second{
            background-color: greenyellow;
            border: 1px dashed rgba(81, 111, 144, 0.66);
            /*绝对定位*/
            position: absolute;
            right: 20px;
        }
        #third{
            background-color: blueviolet;
            border: 1px dashed #6fdb3f;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>

  <style>
    body{
      height: 1000px;
    }
    div:nth-of-type(1){
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;  /*绝对定位: 相对于浏览器*/
      right: 0;
      bottom: 0;
    }
    div:nth-of-type(2){
      width: 50px;
      height: 50px;
      background: yellowgreen;
      position: fixed;  /*fixed固定定位*/
      right: 0;
      bottom: 0;
    }
  </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

z-index

image-20240507211649807

图层

z-index --> 默认是0 最高无限制 一般999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>

  <link rel="stylesheet" href="css/style.css">

</head>
<body>

<div id="content">
  <ul>
    <li><img src="images/1.jpg" alt=""></li>
    <li class="tipText">小刘学Java</li>
    <li class="tipBackGround"></li>
    <li>时间: 2099-01-01</li>
    <li>地点: 火星</li>
  </ul>
</div>


</body>
</html>

#content{
    width: 500px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 2px solid black;
}
ul,li {
    margin: 0px;
    padding: 0px;
    /*去掉小圆点*/
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;

}
.tipText,.tipBackGround{
    position: absolute;
    width: 500px;
    height: 25px;
    top: 277px;
}
.tipText{
    color: white;
    /*图层总层次
    z-index: 999;*/
}
.tipBackGround{
    background: black;
    opacity: 0.5;  /*背景透明度*/
    filter: alpha(opacity = 50);
}

opacity: 0.5; --> 背景透明度

.tipText{
    color: white;
    /*图层总层次
    z-index: 999;*/
}
.tipBackGround{
    background: black;
    opacity: 0.5;  /*背景透明度*/
    filter: alpha(opacity = 50);
}

动画及视野拓展

posted @ 2025-02-26 16:59  LYQ学Java  阅读(8)  评论(0)    收藏  举报