CODEWITHSUNDEEP
htmlcss
user2014429
user2014429

Reputation: 2567

getting div to overlay another div with <p> tags

I have a div called 'events' which contain several paragraph tags. and there's another div I want to overlay the event div with, called 'cancelled'. so that the entire event tag is covered by the transparent cancelled tag. I just cant get the css work the way I want it to and I really need help.the event div should preferably not have a given width. here is what I have so far. (not looking right). Thanks very much.

CSS

#container {
    position: relative;
}

#event, #cancelled {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid red;
}

#cancelled {
    text-align: center;
    z-index: 1;
    color: blue;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid green;
}

HTML

<div id="container">
    <div id="cancelled">
        cancelled
    </div>

    <div id="event">
        <p>aaa</p>

        <p>bbb</p>

        <p>ccc</p>
    </div>
</div>

Upvotes: 0

Views: 588

Answers (1)

scooterlord
scooterlord

Reputation: 15339

You are doing it wrong. the #event element should not be absolute, only the #cancelled as shown:

CSS

#container {
    position: relative;
}

#event,#cancelled {
    border: 1px solid red;
}

#cancelled {
    top: 40px;
    position: absolute;
    text-align: center;
    z-index: 1;
    color: blue;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid green;
}

HTML

<div id="container">
    <div id="cancelled">
        cancelled
    </div>

    <div id="event">
        <p>aaa</p>

        <p>bbb</p>

        <p>ccc</p>
    </div>
</div>

http://jsbin.com/aVefEsi/1/

Upvotes: 1

Related Questions