CODEWITHSUNDEEP
htmlcss
James MV
James MV

Reputation: 8727

Overlaying a image in a div?

This is hard to explain so I've put together this JSFiddle. I want the black div to cut through the blue box so that the black div is underneath the horizontal blue lines. So I'd like the <div class="title">Testing</div> to overlay the <div class="middleFifth">

http://jsfiddle.net/Zhxt9/

TIA in advance and sorry for the bad explanation!

Upvotes: 0

Views: 52

Answers (3)

Mayko
Mayko

Reputation: 439

Try:

.title{
    margin-top: -50px;
}

http://jsfiddle.net/Zhxt9/1/

Or other options would be:

.title {
    position: relative;
    top: -50px;
}

or:

.title {
    position: absolute;
    top: 50px;
}

Depending on the rest of your page

Upvotes: 0

Tom Faltesek
Tom Faltesek

Reputation: 2818

You can relatively position the black div and set the z-index so that it is behind the blue div (also must specify z-index on blue div).

.title{
    width:100%; float:left; 
    background-color:black;
    position: relative;
    top: -50px;
    z-index: 0;
}

Updated Fiddle

Upvotes: 1

Igor
Igor

Reputation: 34011

Not entirely sure what you're aiming for, but you could try something like:

.title{
    width:100%; 
    float:left; 
    background-color:black;

    /* Below properties are what I added */
    position: absolute;
    top: 40px;
    z-index: -10; 
}

Obviously you should change the z-index to a more sensible value by setting it on your other elements, but I included it here for simplicity's sake.

Upvotes: 0

Related Questions