仅溢出 DIV 中的一个元素
overflow just one element in a DIV
有没有办法,CSS或JavaScript允许DIV中的一个元素溢出,即使它的父级溢出是隐藏的。
我编写了一个 jQuery 滑块,它通过使用 overflow: hidden
隐藏幻灯片。
<div class="container">
<img src="image.jpg" />
<div class="text">
THIS TEXT IS HIDDEN WHEN POSITIONED OUTSIDE OF .container
</div>
</div>
CSS:
.container{
overflow:hidden;
position: relative;
width: 500px; height: 250px;
}
不过,我需要图像自然溢出。
你应该删除position: relative;
.如果将其放置在与overflow: hidden;
相同的元素上,它将隐藏该元素。如果您确实需要它,请尝试将其放在.container
的父级上(在树中高于具有overflow: hidden
的元素)。
jsFiddle 演示
解释性文章
#wrap { position: relative; }
.container{
overflow:hidden;
width: 300px; height: 200px;
padding: 10px;
background-color: cyan;
}
.text {
position: absolute;
top: 280px; left: 0;
border: 1px solid red;
}
<div id="wrap">
<div class="container">
Container
<div class="text">Not hidden anymore when positioned outside of .container</div>
</div>
</div>
jQuery Example
$('.text').each(function(){
var t = $(this); // text div
var c = t.closest('.container'); // container parent
var i = c.children('img:first'); // container image
t.width(c.width()); // set text width = to container width
c.width(i.width()); // set container width = to text width
});
注意:
- 这不会影响填充/边距/边框,而是您可以使用的基本逻辑。 将文本宽度
- 设置为等于容器宽度只会使其具有应用溢出的外观(您也可以将文本div的宽度设置为500px)
在 CSS 中声明 z-index,您可以使用 position absolute 来执行此操作。
.container{
z-index:900;
overflow:hidden;
width: 500px;
height: 250px;
}
.container img{
z-index:920;
position:absolute;
}
如果图像的位置不为真,您可以设置图像的边距;
您无法使用position: static
设置图像弹出框
.container{
z-index:900;
overflow:hidden;
width: 500px;
height: 250px;
}
.container img{
z-index:920;
position:static;
}
相关文章:
- 使用clickToggle并在单击另一个元素时关闭元素
- 表追加而不附加最后一个元素
- 滚动到容器中的下一个元素-几乎到了
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 按我自己的类克隆另一个元素的内容和顺序
- Javascript获取上一个元素的内容
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- 在数组中的一个元素上设置多个值
- 无法选择除一个元素外的所有元素
- 使用jquery contains获取一个元素并添加类
- $(.class).empty总是缺少一个元素
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- 如何在一个元素动画之后延迟
- jQuery转盘下一个元素没有滑入
- jquery从另一个元素中移除移除
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 当知道同一hiearch中至少有一个元素时,遍历到元素.结构使用jquery
- 使用数据属性将HTML数据复制到另一个元素
- 如何选择给定类的上一个元素
- 动态修改一个元素,使其与给定的选择器匹配