CSS将一个div放在叠加层顶部

时间:2015-04-04 03:12:09

标签: html css

我创建了一个叠加顶部的div,现在我正试图将div放在叠加层的顶部,我尝试左右两边乱,但没有任何效果。

.request-estimate {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        background-color: rgba(0,0,0,0.8);
        display: none;
}

.request-estimate-box {
        display: none;
        height: 400px;
        width: 40%;
        margin: 0 auto;
        background-color: #FFF;
        z-index: 99999;
        position: fixed;
        top: 15%;
        padding: 20px;
        border-radius: 5px;
}

这是CSS

<div class="request-estimate"></div>
                <div class="request-estimate-box">
                        <h1>Request Free Estimate</h1>
                        <form action="" method="post">
                                <p>
                                        <label for="name">Name</label>
                                        <input type="text" name="name" id="name" class="form-control" />
                                </p>
                                <p>
                                        <label for="email">Email</label>
                                        <input type="email" name="email" id="email" class="form-control" />
                                </p>
                                <p>
                                        <label for="phone">Phone</label>
                                        <input type="phone" name="phone" id="phone" class="form-control" />
                                </p>
                                <p>
                                        <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default" />
                                </p>
                        </form>
                </div>

3 个答案:

答案 0 :(得分:1)

解决方案:https://jsfiddle.net/gqqqeLfL/

request-estimate-box未被request-estimate包含。

原来:

<div class="request-estimate"></div>
  <div class="request-estimate-box"></div>

更改为:

<div class="request-estimate">
  <div class="request-estimate-box"></div>
</div>

此外,删除了position:fixed,因为它会将元素粘贴到一个确切的位置,从而使margin-auto无效。现在,职位默认为position:relativemargin:auto已正确执行。

答案 1 :(得分:1)

.request-estimate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: rgba(0,0,0,0.8);
  /*display: none;*/
}

.request-estimate-box {
  /*display: none;*/
  height: 400px;
  width: 40%;
  margin-left:-20%; /*add this = width/2*/
  background-color: #FFF;
  z-index: 99999;
  position: fixed;
  top: 15%;
  left:50%; /*add this*/
  padding: 20px;
  border-radius: 5px;
}
<div class="request-estimate"></div>
<div class="request-estimate-box">
  <h1>Request Free Estimate</h1>
  <form action="" method="post">
    <p>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" class="form-control" />
    </p>
    <p>
      <label for="email">Email</label>
      <input type="email" name="email" id="email" class="form-control" />
    </p>
    <p>
      <label for="phone">Phone</label>
      <input type="phone" name="phone" id="phone" class="form-control" />
    </p>
    <p>
      <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default" />
    </p>
  </form>
</div>

答案 2 :(得分:1)

我看到两种选择:

.request-estimate-box {
height: 400px;
width: 40%;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 15%;
left: 0;
right: 0;
margin: auto;
padding: 20px;
border-radius: 5px;
}

http://codepen.io/anon/pen/dPLxPJ?editors=110

并且:

.request-estimate-box {
height: 400px;
width: 40%;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 15%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
border-radius: 5px;
}

http://codepen.io/anon/pen/ByEXyM?editors=110

当然,就像Tambo所暗示的那样距离中心宽度的一半。