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

Question

我是一个HTML/CSS的新手，正在尝试创建我的第一个网页。 我无法为类名为inner的

设置背景颜色。目前这个

显示的是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>
      

有什么指导意见吗？可能是我做错了什么？ 感谢帮助！ :)

- Tuhina Singh

Answer 1

当你给内部类设置height: 100%时，问题就出现了。由于绝对定位元素破坏了DOM的框模型，因此它们被处理方式不同。您可能需要使用top bottom left和right属性将绝对定位元素放置在所需位置。

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{
    color: white; /* added to see the text in the black background */
    position: absolute;
    text-align: center;
    background-color: #1b1b1b;
    right: 175px;
}

<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>

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

- Carlos Calla

---

感谢您解决了这个问题。但现在我面临另一个问题：我希望高度为100％，以便左右浮动的“div”具有相等的高度。这就是为什么我首先添加了额外的“div”和“inner”类以及“absolute”定位的原因。我还需要控制右侧div的背景颜色以显示左侧和右侧div之间的分隔。我应该将其发布为新的单独问题吗？ - Tuhina Singh

如果你想的话，可以发另一个问题，但我可以在这个帖子里帮助你，不用担心。给我一些时间，我现在在午餐时间。稍后我会看一下 :) - Carlos Calla

但是为绝对定位的元素添加z-index可能会有所帮助 :) - RavanH

Answer 2

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

    .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%;
    } 

<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>
      

- Marcos Pérez Gude