CSS

CSS Overlaying

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

    <style>
        ul.thumbListLayoutBox {
            display: block;
            list-style-image: none;
            list-style-position: outside;
            list-style-type: none;
        }

        ul.thumbListLayoutBox li {
            float: left;
            height: 156px;
            margin: 10px 11px 11px;
            padding: 5px 5px 5px 0px;
            position: relative;
            width: 216px;
            z-index: 1;
        }

        .thumbOuter {
            display: block;
            position: relative;
            text-align: left;
            width: 218px;
        }

        a.thumbList {
            display: block;
            height: 120px;
            overflow: hidden;
            padding: 1px;
            position: relative;
            text-decoration: none;
            width: 214px;
            border: 2px solid #848486;
        }

        a.thumbList img {
            height: 120px;
            width: 214px;
            border: 0;
        }

        div.LowerBar {
            background: black;
            width: 100%;
            height: 18px;
            top: 102px;
            position: absolute;
            display: block;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            filter: alpha(opacity=50);
            opacity: .5;

        }

        div.LowerBarTop {
            border-top: 1px solid black;
            width: 100%;
            height: 18px;
            top: 102px;
            position: absolute;
            display: block;

        }

        div.LowerBarRate {
            height: 24px;
            right: 4px;
            top: 96px;
            position: absolute;
            display: block;

        }
    </style>

</head>
<body>
    <!-- this is the actual thumb div -->
    <div class="thumbOuter">
        <!-- link containing the image -->
        <a href="viewVideo" class="thumbList" >
            <img src="videoThumb" alt="videoTile">
        </a>
        <!-- backer transparent bar -->
        <div class="LowerBar"></div>
        <!-- writing on top of the bar -->
        <div class="LowerBarTop" style="color:white; padding-top:3px; padding-left:3px;">Length of Video</div>
        <div class="LowerBarRate" style="float:right;" id="rateInfo">
            <!-- post the thumbs up here -->
        </div>
    </div>
</body>
</html>

Example

Stage6 Video Thumb

Now, what I would like to draw your attention to is:

.thumbOuter {
    display: block;
    position: relative;
    text-align: left;
    width: 218px;
}

div.LowerBar {
    background: black;
    width: 100%;
    height: 18px;
    top: 102px;
    position: absolute;
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: .5;	
}

This code is the background for the lower bar shown in the picture. Notice how I use top to position the object whilst causing it to float over the video thumb by using position:relative on the bottom div and position:absolute on the top div. There, no need for z-indexs which will confuse IE. Enjoy :).

Advertisements

2 thoughts on “CSS Overlaying

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s