如何将文本放在边框内 html

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>

我不能post这里的图像，因为我的声望不到10，所以请想象一下。我想将它的 "Users online" 放在边框内，我应该怎么做？谢谢

Answer 1

改变

position: static;

到

position: absolute;

为 #border。这样，border 将是 "removed from the flow"（即其他元素将忽略它）。您可能需要为 #text 调整 margin-left 属性以使其正确对齐。

Fiddle: https://jsfiddle.net/xzdmLt33/1/

Answer 2

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

另一件事是，您应该使用 relative 定位的父级让您的生活更轻松并更好地控制元素，因为定位的元素将离开正常的文档流并导致新的堆叠顺序.

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>

但实际上我会尝试用不同的方法来解决这个问题，因为我发现上面的解决方案有点复杂并且涉及到很多定位，所以如果你只需要一个半透明的背景就可以使用 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;
}

<header>
  <div class="user-panel">Users online</div>
</header>

希望对您有所帮助。

如何将文本放在边框内 html

How to put text inside border html

html

css

text

border