Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

div disappears after position: relative

Tags:

html

css

I'm trying to position an image to the right within a container. However, after I set my parent container to position: relative;, my image disappears. Any ideas? Website: http://andrewgu12.kodingen.com/. Thanks!

CSS:

.slide {
    padding-top: 138px;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    position: relative;
        box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3); 
}
div#inner-container {
    text-align: left;
    width: 960px;
    margin: 0 auto;
    padding: 0;
    white-space: normal;
    position: relative;
}
div#name {
    right: 0;
    bottom: 200px;
    position: absolute;
}

HTML:

<div class="slide" id="home" data-slide="1" data-stellar-background-ratio="1">
        <div id="inner-container">
            <div id="name" clas="row">
                <img src="images/names.png">
            </div>                            
        </div>            
    </div>
like image 849
Andrew Avatar asked Jul 29 '13 07:07

Andrew


2 Answers

It does not disappear, it just goes all the way up and out the monitor xD You have to remember that when you use position: absolute the object is going to look for a parent that has position: relative to position itself. When you add position: relative to div#inner-container it changes the div#name.row reference. Maybe adding height: 100%; to the parent div might do the trick for what you want?

like image 56
Derik Avatar answered Sep 18 '22 01:09

Derik


Try this:

div#name {
    position:fixed;
    right: 0px;
    bottom: 200px;

}
like image 32
Abhishek Jain Avatar answered Sep 20 '22 01:09

Abhishek Jain