CODEWITHSUNDEEP
imagecsshtml
Jtonna
Jtonna

Reputation: 155

Why Does My Image Overlap My Banner

here is my JsFiddle: JsFiddle

i want to know why my image/image caption overlap's my website banner? I'm pretty sure its something to do with my absolute positioning but I'm not 100% sure! I'm trying to have the image/image caption right under the banner. I don't want to position it with px/cm/in because it may be different across screen sizes!

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;  
}

Upvotes: 1

Views: 180

Answers (2)

ByronMcGrath
ByronMcGrath

Reputation: 375

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

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

You could just position it to where ever you want it. :)

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

position:absolute removes an element from the document flow, allowing other elements to take up the freed space. There seems to be no real reason for you using position: absolute, so just remove it...

Upvotes: 1

Related Questions