gpt4 book ai didi

html - 如何使 div 溢出 : hidden overlap floating div?

转载 作者:行者123 更新时间:2023-11-28 18:28:04 24 4
gpt4 key购买 nike

我在一个使用第 3 方在线 HTML 编辑器 (CKEditor) 的网站上工作。我将编辑器控件包裹在相对定位的 DIV 中,并且有一个 z-index 位于可见堆栈的顶部。问题在于,在某些页面上,右侧有 float (float: right) 的图像。一些 CKEditor 样式将元素溢出属性设置为隐藏(溢出:隐藏)。

因此,尽管我包含的 DIV 具有比 float 图像更大的 z-index,但 CKEditor 元素不会溢出到图像顶部。这会创建一个看起来好像编辑器右上角已被切掉的结果。

有没有一种方法可以在不尝试编辑 CKEditor 样式的情况下解决这个问题?查看此示例 sinario:

http://jsfiddle.net/nmartin867/StHJA/

HTML

<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>

CSS:

div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}

.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;

}

.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}

最佳答案

你可以这样做,但我不确定它是否适用于你的情况。

.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}

或者,当您想要覆盖第三方样式但不想在第三方应用程序中编辑它们时,您可以在您自己的样式表中重新创建相同的 css 类,并使用 important! 强制它覆盖第三方!例如:

float: none !important;

关于html - 如何使 div 溢出 : hidden overlap floating div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15145079/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com