Question

我正在尝试使用CSS + HTML在视口顶部放置一个紫色块。我希望紫色块在水平方向居中并出现在其他任何对象的顶部。代码的组织方式，其他元素（绿色按钮）必须出现在HTML文件的紫色块上方。

我正在使用以下HTML。适当地将块放置在页面顶部和其他元素的顶部。但是它不是水平居中的。如何使用CSS将其水平居中？

柱塞here。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .pretty-button {
        color: white;
        background-color: rgba(17, 175, 29, 0.64);
        border-radius: 0.6em;
        border: 0.2em solid #73AD21;
        padding: 0.5em;
      }

      .top-block {
        position: absolute;
        top: 0px;
        height: 30px;
        width: 60%;
        margin: auto;
        background-color: purple;
        z-index: +1;
      }
    </style>
  </head>
  <body>
    <button class="pretty-button">Button A</button>
    <div id="div1">
      <div id="div2">
        <div id="div3" class="top-block">
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

在代码z-index: 9999; margin-left: 20%;下应用

.top-block {
    position: absolute;
    top: 0px;
    height: 30px;
    width: 60%;
    margin: auto;
    background-color: purple;
    z-index: 9999;   
    margin-left: 20%;
}

Answer 2

只需将transform: translateX(35%);和z-index: 999添加到您的.top-block类中

Answer 3

这应该有助于将div水平居中！

<!DOCTYPE html>
<html>
  <head>
    <style>
      .pretty-button {
        color: white;
        background-color: rgba(17, 175, 29, 0.64);
        border-radius: 0.6em;
        border: 0.2em solid #73AD21;
        padding: 0.5em;
      }

      .top-block {
        position: absolute;
        top: 0px;
        height: 30px;
        width: 60%;
        background-color: purple;
        left: 20%;
      }
    </style>
  </head>
  <body>
    <button class="pretty-button">Button A</button>
    <div id="div1">
      <div id="div2">
        <div id="div3" class="top-block">
        </div>
      </div>
    </div>
  </body>
</html>

Answer 4

应用以下代码

.pretty-button 
{
  color: white;
background-color: rgba(17, 175, 29, 0.64);
border-radius: 0.6em;
border: 0.2em solid #73AD21;
padding: 0.5em;
display: flex;
margin: auto;
z-index: 9;
position: relative;
}

.top-block 
{
  position: absolute;
  top: 0px;
  height: 60px;
  width: 60%;
  margin: auto;
  background-color: purple;
  z-index: +1;
  left: 0;
  right: 0;
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <button class="pretty-button">Button A</button>
    <div id="div1">
      <div id="div2">
        <div id="div3" class="top-block">
        </div>
      </div>
    </div>
  </body>
</html>

如何将该块放置在页面顶部但水平居中？

4 个答案: