Question

    #border {
        position: static;
        z-index: 1;
        width: 120px;
        height: 120px;
        margin-left: 92% ;
        padding: 15px;
        border-radius: 11px;
        background: white;
        opacity: 0.2;
    }
    #text {
        margin-left: 93%;
        z-index: 2;
        color: white;
        font-weight: bold;  
    }

    <div id="border"></div>
    <div id="text">Users online</div>

我不能在这里发布图片，因为我的声誉不到10，所以请试着想象一下。我想在边境内放置“用户在线”，我该怎么做？感谢。

Answer 1

我假设您正在尝试使用半透明背景的元素。由于您在ID为opacity的元素上使用border属性。如果z-index设置为position，这是static元素的默认值，则div不会产生任何影响。

另一方面，您应该使用relative定位父级来让您的生活更轻松，并且可以更好地控制元素，因为定位元素将保留正常的文档流并导致新的堆叠顺序。< / p>

Here您可以找到有关z-index属性，堆叠和文档流程的详细信息。

这是解决您问题的方法之一。

body {
  background:black;
}

.holder {
  position:relative;
}

#border {
  position: absolute;
  z-index:1;
  right:0;
  width: 120px;
  height: 120px;
  padding: 15px;
  border-radius: 11px;
  background: white;
  opacity: 0.2;
}

#text {
  position: absolute;
  z-index:2;
  right:0;
  width: 120px;
  height: 120px;
  padding: 15px;
  text-align: center;
  color: white;
  font-weight: bold;  
}

<div class="holder">
  <div id="border"></div>
  <div id="text">Users online</div>
</div>

但我实际上会尝试用不同的方法来解决这个问题，因为我觉得上面的解决方案有点复杂，而且涉及很多定位，所以如果你只需要半透明背景就可以使用{{1具有background值的属性。这是一个例子。

rgba

.user-panel {
  float:right;
  height: 120px;
  width: 120px;
  padding: 15px;
  border-radius: 11px;
  /* fallback for browser that do not support rgba */
  background: #ccc;
  /* semitransparent background */
  background: rgba(0, 0, 0, .2);
  text-align: center;
  color: white;
}
/* clear the float using the pseudo after element */
user-panel:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}

希望有所帮助。

Answer 2

更改

position: static;

到

position: absolute;

代表#border。这样，border将“从流程中删除”（即其他元素将忽略它）。您可能需要调整margin-left的{{1}}属性，以使其正确对齐。

小提琴：https://jsfiddle.net/xzdmLt33/1/

如何将文本放在边框html中

2 个答案: