我创建了一个叠加顶部的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>
答案 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:relative
,margin: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所暗示的那样距离中心宽度的一半。