CODEWITHSUNDEEP
htmlcssless
Zack Shapiro
Zack Shapiro

Reputation: 6998

Link not appearing in div class, appearing outside of it

I'm trying to re-create a few elements I've seen online and I've been using Element Inspector but can't seem to figure out why this a href element is loading outside of my modalHeader class.

Here's some HTML:

<div id="modalContainer">
<div class="fakeModal">

    <div class="modalHeader"> 

        <h2>Fake Modal Heading</h2>
        <a href="#" class="close">x</a>

    </div> <!-- end modalHeader -->

</div> <!-- End fakeModal -->

And corresponding CSS (using Less)

#modalContainer {
width: 700px;
height: 250px;
background: gray;
padding: 1px; }

.fakeModal {
    width: 500px;
    height: 150px;
    margin: 50px auto 50px auto;
    border-radius: 3px;
    //border: 3px solid black;
    background: white;
}

.modalHeader {
h2 {
    background: @dullGray;
    border-bottom: solid 1px #EEE; //This makes so much of a difference!!!!
    border-radius: 3px 3px 0 0;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    padding: 9px 15px;
}

a.close{
    position: absolute;
    top: 10px;
    right: 10px;
    color: gray;
    text-decoration: none;
    font-size: 18px;
}

a.close:hover {
    text-decoration: underline;
    color: gray;
    }
}

Can anyone figure out why the x isn't rendering in the horizontal box I've defined in modalHeader?

Upvotes: 0

Views: 252

Answers (3)

sandeep
sandeep

Reputation: 92793

@zack; you give position: absolute; to your a tag so, give position: relative; to your parent div modalHeader that's work for you .

CSS:

.modalHeader {position: relative;}

for more read this article http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

Upvotes: 2

Sgoettschkes
Sgoettschkes

Reputation: 13189

An absolute position always refers to the element above which is positioned relative or absolute. If there isn't one, it refers to the body. Try to change position: absolute; to position: relative; or define the modalHeader as position: relative;.

Upvotes: 0

cjk
cjk

Reputation: 46425

You've set the link to be position absolute, not relative to it's parent container. Remove the position, and change the top and right to margins.

Upvotes: 2

Related Questions