Question

这是我的JsFiddle：JsFiddle

我想知道为什么我的图片/图片标题重叠了我的网站横幅？我非常确定这与我的绝对定位有关，但我并非百分之百确定！我试图在横幅下面设置图像/图像标题。我不想用px / cm / in来定位它，因为它可能在屏幕尺寸上有所不同！

HTML：

<!doctype html>
<title>Untitled Document</title>

<body>
    <div class="banner"><img src="http://i.imgur.com/7m4rahc.jpg" alt="Loading..."/></div>

    <div id="mainwrapper">

        <div id="box-3" class="box">  
            <img id="image-3" src="http://i.imgur.com/NEZfdM7.jpg"/>  
            <span class="caption fade-caption">  
                <h3>Click To Subscribe</h3>  
                <center>
                    <script src="https://apis.google.com/js/platform.js"></script>

                    <div class="g-ytsubscribe" data-channel="AfterlifeGamingHD" data-layout="full" data-count="default"></div>
                </center>  
            </span>  
        </div>  

    </div>
</body>

CSS：

charset "utf-8";
/* CSS Document */
body {
    background-image: url(http://i.imgur.com/2MVANTR.jpg);
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}
img, .banner {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
#mainwrapper .box {  

    border: 5px solid #fff;  
    cursor: pointer;  
    float: left;  
    position: relative;  
    overflow: hidden;  
    width: 370px;  
    height: 470px;  
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;  
    -moz-box-shadow: 1px 1px 1px 1px #ccc;  
    box-shadow: 1px 1px 1px 1px #ccc;  
}  

#mainwrapper .box img {  
    position: absolute;  
    left: 0;  
    width: 370px;  
    height: 470px;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}
#mainwrapper .box .caption {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    left: 0;  
}
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {  
    opacity: 0;  
    width: 370px;  
    height: 470px;  
    text-align: left;  
    padding: 15px;  
}  
#mainwrapper .box:hover .fade-caption {  
    opacity: 1;  
}

Answer 1

position:absolute从文档流中删除元素，允许其他元素占用释放的空间。你似乎没有真正的理由使用position: absolute，所以只需删除它......

Answer 2

#box-3{
position:relative;
top:500px;(set this to what you want it)
}

http://jsfiddle.net/J35sf/5/

您可以将它定位到您想要的位置。：）

为什么我的图像重叠我的横幅

2 个答案: