我有这个叠加层和这个叠加框以及一个叠加关闭按钮:
我的问题是桌面,平板电脑或手机上的关闭按钮已经到处都是。我该如何解决这个问题,使其始终位于框的右下方。这是代码:
.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-container {
top: 0%;
position: fixed;
z-index: 99999;
}
.request-estimate-box {
display: none;
height: 400px;
width: 50%;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
border-radius: 5px;
}
.request-estimate-close {
display: none;
position: fixed;
z-index: 99999;
color: #FFF;
bottom: 10%;
font-size: 26px;
left: 90%;
cursor: pointer;
}
<div class="request-estimate" style="display: block;"></div>
<div class="request-estimate-box-container">
<div class="request-estimate-box" style="display: block;">
<h1>Request Free Estimate</h1>
<form action="index.php" 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>
<div class="request-estimate-close" style="display: block;"><a href="#">X</a></div>
</div>
答案 0 :(得分:1)
尝试使用css属性position:relative;
将内容包装在div中答案 1 :(得分:0)
在框的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-container {
top: 0%;
position: relative;
z-index: 99999;
}
.request-estimate-box {
display: none;
height: 400px;
width: 50%;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
border-radius: 5px;
}
.request-estimate-close {
display: none;
position: fixed;
z-index: 99999;
color: #FFF;
bottom: 5%;
font-size: 26px;
left: 80%;
cursor: pointer;
}
&#13;
<div class="request-estimate" style="display: block;"></div>
<div class="request-estimate-box-container">
<div class="request-estimate-box" style="display: block;">
<h1>Request Free Estimate</h1>
<form action="index.php" 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>
<div class="request-estimate-close" style="display: block; float:right;"><a href="#">X</a></div>
</div>
&#13;
<强>更新强>
因为你想在盒子外面。我编辑了代码并将其设置为相对位置,让我知道是否还没有工作。它对我有用。