绝对位置和相对位置都不好用
Neither position absolute neither position relative is working well
当我点击一个名为"test"的div时,一个名为"outside"的div出现了,也出现了一个名为"inside"的div,具有更高的z-index。
我的问题是,当我将位置设置为绝对到"内部"时,我不能归因于margin-bottom。当我将位置设置为相对位置时,它会将div "test"放在它的下面。
这可能有点难以理解,但问题真的很简单。这里有一个小提琴:http://jsfiddle.net/malamine_kebe/QRpqs/我的CSS是:
#insideAbsolute{
background-color:#f8f8f8;
position: absolute;
top:0;
left:20%;
width:60%;
margin-top:35px;
margin-bottom:35px;
z-index:3;
border-radius: 7px;
box-shadow: 6px 6px 20px black;
}
#insideRelative{
background-color:#f8f8f8;
position: relative;
top:0;
left:20%;
width:60%;
margin-top:35px;
margin-bottom:35px;
z-index:3;
border-radius: 7px;
box-shadow: 6px 6px 20px black;
}
#outside{
position: fixed;
left:0;
top:0;
height: 100%;
width: 100%;
background-color: black;
opacity:0.7;
z-index:2;
background-attachment:fixed;
}
.test{
z-index:1;
}
我的HTML:
<div id="outside"></div>
<div id="insideAbsolute"></div>
<div id="insideRelative"></div>
<div class="testAbsolute">test position absolute</div>
<div class="testRelative">test position relative</div>
和我的jQuery
$('#outside').hide();
$('#insideAbsolute').hide();
$('#insideRelative').hide();
$(document).on('click', '.testAbsolute', function () {
$('#outside').show(0, function() {
$('#insideAbsolute').show(0, function() {
$(this).html('<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>');
$(document).on('click','#outside',function(){
$('#insideAbsolute').html('');
$('#outside').hide();
});
});
});
});
$(document).on('click', '.testRelative', function () {
$('#outside').show(0, function() {
$('#insideRelative').show(0, function() {
$(this).html('<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>');
$(document).on('click','#outside',function(){
$('#insideRelative').html('');
$('#outside').hide();
});
});
});
});
给你一个小技巧。在你的CSS中添加:
#insideAbsolute:after{
content:'';
height : 35px;
width : 100%;
position : absolute;
bottom : -35px;
}
创建"假"页边距!
小提琴:http://jsfiddle.net/QRpqs/1/
相关文章:
- 我可以获得相对于被点击元素的确切点击位置吗
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- 在不移动元件的情况下从相对位置更改为固定位置
- 打开相对于鼠标位置的CSS3/HTML5模式对话框
- Javascript元素相对于屏幕的位置
- 块相对于父对象的位置
- 是否可以模拟带有“位置:相对”的元素的“位置:绝对”放置
- Android默认浏览器:谷歌地图制作“;位置:相对;元素在页面顶部滚动
- 如何使用位置:相对左侧:220px 移动具有柔和效果的元素
- 拖放位置相对
- 菜单位置相对于介质查询的文档高度
- 定位Div "Fixed"垂直和绝对;水平位置:相对位置;容器Div
- 什么可以防止位置:相对的;左:0;右:200 px;不影响元素的宽度
- 如何使
位置:相对嵌套在一个位置:绝对
- 位置相对内容计算高度
- 将按钮放置在元素的右上角,位置:相对
- CSS JQuery Div开始位置相对于窗口大小
- 如何在图像顶部放置标记,标记的位置相对于图像给出
- 使用AngularJS UI使工具提示位置相对于窗口大小
- 子元素位置相对工作错误