通过点击

Question

添加浮动DIV到表行我有如下表：

在盘旋蓝色图标的点击，应该在右侧打开的“浮动”的div一些项目侧。

该div应该是响应式的，并且与该行完全对齐。

我做到了，将浮动div定义为absolute并使用了固定像素尺寸。

我的问题是，如果我根据行的相对位置对齐浮动div，它会得到父div的overhidden。如果我把它与dom做比较，那么它就没有反应。

任何关于我的divs结构应该如何的建议？

如果有任何信息丢失，请让我知道吗？

编辑：

下面是该问题的一个JS-小提琴：https://jsfiddle.net/omriman12/3gv788o4/

我想红squere给行对齐（试行红色squere移动的右侧黑盒子）

Answer 1

试试这个，可能是你要求这个。

.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; 
}