div在position：relative之后消失 [英] div disappears after position: relative

问题描述

我正在将一个图像放置在容器内的右侧。但是，我将我的父容器设置为 position：relative; 后，我的图像消失。有任何想法吗？网站： http://andrewgu12.kodingen.com/ 。谢谢！

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 =slideid =homedata-slide =1data-stellar-background-ratio =1 
< div id =inner-container> 
< div id =nameclas =row> 
< img src =images / names.png> 
< / div> 
< / div> 
< / div> 
  

解决方案

它不会消失，你必须记住，当你使用 position：absolute 时，该对象将寻找一个具有 position：relative的父类定位自己。当您将 position：relative 添加到 div＃inner-container 时，会更改 div＃name .row 引用。可能会向父 div 添加 height：100％;

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>

解决方案

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?

这篇关于div在position：relative之后消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！