我有下表:
点击带圆圈的蓝色图标,应打开一个“浮动”div,右侧有一些项目。
这个div应该响应并与行完全对齐。
我是通过将浮动div定义为absolute
并使用固定像素尺寸来完成的。
我的问题是,如果我根据行的相对位置对齐浮动div,它将由父div获得overhidden
。如果我把它与dom相比是绝对的,那么它没有响应。
关于我的div结构应该是什么样子的任何建议?
如果缺少任何信息,请告诉我?
编辑:
这是一个显示问题的JS小提琴:https://jsfiddle.net/omriman12/3gv788o4/
我希望红色squere与行对齐(尝试将红色squere移动到黑匣子的右侧)
答案 0 :(得分:0)
试试这个,可能是你要求这个。
.main_wrapper{
width: 79%;
position:relative;
display: inline-block;
overflow: hidden;
}
.a1{
width: 100%;
height: 50px;
background-color: black;
}
.a2{
width: 100%;
height: 50px;
background-color: red;
position: fixed;
right: 0px;
top: 8px;
}
.blue-wrapper {
width:20%;
background-color:blue;
display: inline-block;
height:50px;
}
(或)
.main_wrapper{
width: 100%;
position:relative;
display: inline-block;
overflow: hidden;
}
.a1{
width: 100%;
height: 50px;
background-color: black;
}
.a2{
width: 100%;
height: 50px;
background-color: red;
position: absolute;
left: 0px;
top: 8px;
z-index:9;
}
.blue-wrapper {
width:20%;
background-color:blue;
display: inline-block;
height:50px;
position:absolute;
top:8px;
right:8px;
z-index:1;
}