Question

我正在为我的应用使用引导程序modal。我的modal里面有很多元素。

但是，我modal中的一个元素设置为absolute位置且元素大于模态。我希望在modal之上显示元素，而不是在modal内切断。我试过了z-index，但它不起作用。有什么建议吗？非常感谢！

modal html

<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Test
            </div>
            <div class="modal-body">
               //....contents..
               <div class="option"> lots of stuff...</div> 
            </div>
        </div>
    </div>
</div>

CSS

.option{
    position: absolute;
    max-width: 600px;
}

它显示为

 --------------
|              |
|       -------|
|      |option |
|       -------|
|

但我想要

 --------------
|              |
|       --------------
|      |   option     |
|       --------------
|              |

Answer 1

默认情况下，模态有＆＃34;溢出：隐藏＆＃34;。此属性导致大的内部元素被切断，而不是延伸到父元素的边界之外。您可以覆盖bootstrap的样式并使用＆＃34; overflow：visible＆＃34;，但这可能会对样式产生其他负面影响。

Answer 2

<强> CSS：

.option{
    position: absolute;
    max-width: 600px;
}

它会起作用请检查。

如何在我的案例中建立模态

2 个答案: