position:absolute;绝对定位demo

2022-06-25 21:02:39 阅读：163 来源： 互联网

标签：margin top height width demo position left banner absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在img中上添加版心</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .banner{
            width: 100%;
            position:relative;
        }
        .banner-img{
            width: 100%;
        }
        .banner .center{
            position: absolute;
            /* 进行绝对定位*/
        /* 宽度是左边箭头的宽度56+中间宽度1088+右边箭头宽度。用来制作版心*/
          width: 1200px;
        /* 高度可以随便取值*/
            height:300px;
            /**/
            top:50%;
            left:50%;
            margin-top:-150px;
            margin-left:-665px;
        /* 此时橙色盒子居中显示。只有绝对定位才能压盖住这张大的照片*/
        }
         /* 书写按钮的宽度和高度，同样使用绝对定位*/
        .banner .center .left-btn{
            position:absolute;
            /*此时形成了子绝父绝*/
            left: 0;
            top:50%;
            margin-top:-37px;
            width: 56px;
            height:74px;
            background-color: rgba(0,0,0,.3);
        }
        .banner .center .right-btn{
            position:absolute;
            /*此时形成了子绝父绝*/
            right: 0;
            top:50%;
            /*垂直居中，表示拉回负的height的一半*/
            margin-top:-37px;
            width: 56px;
            height:74px;
            background-color: rgba(0,0,0,.3);
        }
        .banner .center h2{
            position:absolute;
            width: 700px;
            height:79px;
            font-size: 40px;
            font-family: 楷体;
            color: rgba(74, 175, 206, 0.99);
            font-weight: lighter;
            /*top:50%;*/
            /*margin-top: -79px;*/
            /*left:88px;*/
        }
        .banner ol{
            position:absolute;
            width: 120px;
            height:12px;
            /**/
            bottom:20px;
            left:50%;
            /*水平居中，表示拉回负的width的一半*/
            margin-left:-60px;
            list-style: none;
        }
        .banner ol li{
            float: left;
            width: 20px;
            height:12px;
            background-color: white;
            margin-right: 10px;
            border-radius: 10px;
        }
        /*最后一个没有margin*/
        .banner ol li:last-child{
            margin-right: 0;
        }
        .banner ol li.cur{
            width: 30px;
            background-color: rgba(74, 175, 206, 0.99) ;
        }
    </style>
</head>
<body>
   <section class="banner">
     <img class="banner-img" src="resource/src/image/3.jpg" alt="">
     <div class="center">
         <!--将要压盖图片的文字书写在此标签中-->
         <h2>愿你做一道柔软的光，温暖别人的同时 终有一天也会照亮自己的路。</h2>
          <!--按钮使用a标签操作-->
         <a href="" class="left-btn"></a>
         <a href="" class="right-btn"></a>
     </div>
<!-- 小圆点！ol标签是绝对定位的，但是li是在里面浮动的-->
       <ol>
           <li class="cur"></li>
           <li></li>
           <li></li>
           <li></li>
       </ol>
   </section>
</body>
</html>

标签：margin,top,height,width,demo,position,left,banner,absolute
来源： https://www.cnblogs.com/LiLi8866/p/16412387.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

position:absolute;绝对定位demo