无法使用绝对位置设置div的背景颜色

Question

我是html / css的新手，正在尝试创建我的第一个网页。 我无法为类inner设置div的背景颜色。截至目前，这个div正在显示banner-bottom类中的背景颜色。

以下是我的HTML：

    .banner-bottom{
      background:#F7F7F7;
      padding:1em 1em;
      text-align:center;
      position: relative;
    }
    
    .floatleft {
    	float:left;
    	width: 25%;
    	height: 100%;
    }
    
    .floatright {
    	float:right;
    	width: 75%;
    	background-color: #EEE;
    	position: relative;
    	text-align: center;
    }
    
    .inner{
    	position: absolute;
    	height:100%;
    	text-align: center;
    	background-color: #1b1b1b;
    	width: 100%;
    }	

<div class="banner-bottom" width="100%" >	
         <div class="floatleft"><input  type="button" class="pink_btn" value="Who?"/></div>
         <div class="floatright"><div class="inner"> some values here</div></div>
         <div style="clear:both;"></div>
    </div>
      

关于我可能做错的任何指示？ 谢谢帮忙！ ：）

Answer 1

将height: 100%设置为inner课程时会弹出问题。绝对定位元素被处理不同，因为它们打破了DOM的盒子模型。您可能希望使用top bottom left和right属性将绝对定位元素放置在所需位置。

HTML：

＆＃13;

＆＃13;

.banner-bottom{
  background:#F7F7F7;
  padding:1em 1em;
  text-align:center;
  position: relative;
}

.floatleft {
    float:left;
    width: 25%;
    height: 100%;
}

.floatright {
    float:right;
    width: 75%;
    background-color: #EEE;
    position: relative;
    text-align: center;
}

.inner{
    color: white; /* added to see the text in the black background */
    position: absolute;
    text-align: center;
    background-color: #1b1b1b;
    right: 175px;
}

＆＃13;

<div class="banner-bottom" width="100%" >	
     <div class="floatleft"><input  type="button" class="pink_btn" value="Who?"/></div>
     <div class="floatright"><div class="inner"> some values here</div></div>
     <div style="clear:both;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我将color: white;添加到.inner以查看黑色背景中的文字，您可以根据自己的偏好进行更改。

Answer 2

您的问题是.inner中定义的高度，因为绝对定位不等于相对。如果在这种情况下定义100％高度则为零高度。将其更改为PX或EM值或直接将其删除。并注意绝对和固定的定位，肯定会有很多其他解决方案不那么危险

＆＃13;

＆＃13;

    .banner-bottom{
      background:#ff0000;
      padding:1em 1em;
      text-align:center;
      position: relative;
    }
    
    .floatleft {
    	float:left;
    	width: 25%;
    	height: 100%;
    }
    
    .floatright {
    	float:right;
    	width: 75%;
    	background-color: #EEE;
    	position: relative;
    	text-align: center;
    }
    
    .inner{
    	position: absolute;
    	text-align: center;
        color: white;
    	background-color: #1b1b1b;
    	width: 100%;
    }	

＆＃13;

<div class="banner-bottom" width="100%" >	
         <div class="floatleft"><input  type="button" class="pink_btn" value="Who?"/></div>
         <div class="floatright"><div class="inner"> some values here</div></div>
         <div style="clear:both;"></div>
    </div>
      

＆＃13;

＆＃13;

＆＃13;