关于position：absolute使用的心得

最新推荐文章于 2023-06-04 22:50:38 发布

ZooQF

最新推荐文章于 2023-06-04 22:50:38 发布

阅读量427

点赞数

分类专栏：前端文章标签： html 结构

本文链接：https://blog.csdn.net/qq_33204572/article/details/68161177

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天练习js的一个轮播图的功能时，结构层就卡住了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container" id="container">
    <nav>
        <div class="but"><p>首页</p></div>
        <div class="but"><p>点击看看</p></div>
        <div class="but"><p>会自动的</p></div>
        <div class="but"><p>我的网站</p></div>
    </nav>
    <div class="show" id="show">
        <div class="picture one"></div>
        <div class="picture two"></div>
        <div class="picture thr"></div>
        <div class="picture fou"></div>
    </div>
</div>
<script src="js/script.js"></script>
</body>
</html>

事项在class为show的区域放置图片堆叠，将下面的几个div都设置了position：absolute，并将所要堆叠的图片设置为背景

结果图片全都偏到了页面右边，查询后得知，要将absolute属性的父元素设置relative才能实现对absolute的元素进行排列，

但设置后并无作用，调整后，发现需要设置div.show的height和width，问题方能解决

/*导航部分*/
.container{
    margin: 0 auto;
    text-align: center;
}
.container nav div{
    width: 300px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    border-radius: 5px;
}
.container nav div p{
    color: #666;
    font-weight: 800;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
}
.container nav div:hover{
    background-color: #ffcc00;
    cursor: pointer;
}

/*展示图片*/
.show{
    text-align: center;
    margin: 0 auto;
    position: relative;
    width: 1200px;
    height: 460px;
}
.picture{
    width: 1200px;
    height: 460px;
    position: absolute;
    display: none;
}
.one{
    background-image: url("../img/1.jpg");
}
.two{
    background-image: url("../img/2.jpg");
}
.thr{
    background-image: url("../img/3.jpg");
}
.fou{
    background-image: url("../img/4.jpg");
}