position:absolute用法(隐藏溢出部分)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了position:absolute用法(隐藏溢出部分)相关的知识,希望对你有一定的参考价值。
参考技术A 地址: https://www.cnblogs.com/goloving/p/9275776.html
1、绝对定位元素溢出父元素,怎么隐藏问题?
通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏!
但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐藏,需要在父元素上也加上一个定位position:relative;才能将含有position:absolute属性的子元素进行溢出隐藏!
绝对定位元素相对的元素是它最近的一个祖先,该祖先满足:position的值必须是:relative、absolute、fixed,若没有这样的祖先则相对于body进行定位。偏移值由其top、bottom、left、right值确定。
而绝对定位的元素若超出其父元素的边界,要想将溢出的部分隐藏,则,想隐藏在哪个祖先里,该祖先必须同时设置position:relative/absolute/fixed和overflow:hidden的值。
2、绝对定位常见误区:
通常我们常听说:CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位,如果要想相对当前元素的父元素来定位,父元素一定要设置position:relative。
注意,前面一句是没有问题的,在没有父元素设置定位的话,默认就是以body来定位的,但是后面一句,要想相对父元素定位,父元素必须设置相对定位(relative),根据我的开发经验和查阅相关资料确认后发现,这是不对的。
正确的理解姿势是:
相对定位:相对于块级元素(或行内块)自身位置进行定位;
绝对定位:绝对定位的盒子是相对于 离它最近的一个已定位的盒子进行定位的(默认是body);
PS:注意是最近的盒子,而不是最近的父元素
注意:css描述的绝对定位概念,没有说明是离他最近的一个已相对定位的盒子进行定位的,所以离他最近的盒子的定位可以是相对定位(relative)和绝对定位(absolute)的,但是在开发中,一般是父盒子设置相对定位的,但是不代表只能是相对定位。
隐藏溢出的div中的中心图像
【中文标题】隐藏溢出的div中的中心图像【英文标题】:center image in div with overflow hidden 【发布时间】:2012-06-05 12:59:16 【问题描述】:我有一个 400 像素的图像和一个较小的 div(在我的示例中宽度并不总是 300 像素)。我想把图片在div中居中,如果有溢出就隐藏。
注意:我必须在图像上保留position:absolute
。我正在使用 css-transitions,如果我使用 position:relative
,我的图像会有点晃动 (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/)。
jsfiddle http://jsfiddle.net/wjw83/1/
【问题讨论】:
很难理解到底是什么问题以及您要达到什么目标。是that it 吗? 在bit.ly/MaYbMB 上,如果您将鼠标悬停在“教练”标签上,它会稍微晃动。我想使用 position:absolute 来解决这个问题。问题是溢出:隐藏不会影响具有位置的子元素:绝对。 我在存档链接上看不到任何图像:也许您可以edit 您的问题并完全删除链接。另外,请直接在您的问题中插入小提琴的内容,谢谢。 【参考方案1】:你应该使容器相对,并给它一个高度,然后你就完成了。
http://jsfiddle.net/jaap/wjw83/4/
.main
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 200px;
img.absolute
left: 50%;
margin-left: -200px;
position: absolute;
<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" />
如果您愿意,您还可以通过添加负边距和顶部位置来垂直居中图像:http://jsfiddle.net/jaap/wjw83/5/
【讨论】:
这是旧的......伙计,你刚刚节省了数小时的调试时间!真的很感激...... 这不适用于不同尺寸的图片【参考方案2】:以上解决方案对我来说都不是很好。我需要一个动态图像大小以适应带有overflow:hidden
.circle-container
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
.circle-img img
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
这里的工作示例: http://codepen.io/simgooder/pen/yNmXer
【讨论】:
感谢您的回复,我已经寻找了几个晚上的方法,您已经解决了! 没问题!它花了很多时间,但它有很多应用程序 - 它几乎是必不可少的。 谢谢!随着时间的推移,我一直在回到这个问题,因为我从来没有对其他解决方案 100% 满意......transform: translate
太挑剔了。我多次尝试使用margin:0 auto
,但没有成功。真正的魔法发生在margin:0 -100%
而不是auto
值:)【参考方案3】:
最新解决方案:
HTML
<div class="parent">
<img src="image.jpg" />
</div>
CSS
.parent
width: 200px;
height: 200px;
overflow: hidden;
/* Magic */
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
【讨论】:
很好的提议,简单,干净和有效。这是很好的 CSS 编码。恭喜:-) @SamuelRamzan 谢谢! 对于不同尺寸的图片,我不得不通过设置justify-content: stretch;
来调整代码,这样图片才能填满容器的宽度。【参考方案4】:
MELISSA PENTA (https://www.localwisdom.com/) 发现了这个不错的解决方案
HTML
<div class="wrapper">
<img src="image.jpg" />
</div>
CSS
div.wrapper
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
div.wrapper img
margin:-100%;
在 div 中居中任意大小的图像 与圆形包装和不同大小的图像一起使用。
CSS
.item-image
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
.item-image img
height: 200px;
margin: -100%;
max-width: none;
width: auto;
这里的工作示例codepen
【讨论】:
【参考方案5】:对我来说,flex-box 非常适合将图像居中。
这是我的 html 代码:
<div class="img-wrapper">
<img src="..." >
</div>
这是我用于 css 的: 我希望图像与包装元素一样宽,但如果高度大于包装元素的高度,则应该“裁剪”/不显示。
.img-wrapper
width: 100%;
height: 50%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img
height: auto;
width: 100%;
【讨论】:
【参考方案6】:<html>
<head>
<style type="text/css">
.div-main
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
【讨论】:
【参考方案7】:只需确保您如何通过 css 背景使用图像使用背景图像位置,如背景:url(您的图像路径)不重复中心中心;它会自动将中心与屏幕对齐。
【讨论】:
【参考方案8】:这似乎适用于我们的网站,使用您的想法和基于包装器 div 左边缘的一些数学运算。向左走 50% 然后取出 50% 的额外边距似乎是多余的,但它似乎有效。
div.ImgWrapper
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
img.CropCenter
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>
【讨论】:
【参考方案9】:你必须从侧面合并你的图像以隐藏它试试这个
3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...
上面网站上第一种方式的演示之一
try demo
我也会读一读
【讨论】:
【参考方案10】:使用flex-box
为后代提供工作解决方案:
要点:
-
为包装器隐藏溢出
图片高度和宽度必须指定,不能是百分比。
使用任何您想要使图像居中的方法。
wrapper
width: 80;
height: 80;
overflow: hidden;
align-items: center;
justify-content: center;
image
width: min-content;
height: min-content;
【讨论】:
【参考方案11】:我一直在尝试在我最近的站点的this page 中实现 Jaap 的答案,但有一个区别:.main height: 设置为 auto 而不是固定的 px 值。 作为响应式开发人员,我正在寻找一种将图像高度与左侧浮动文本元素同步的解决方案,但前提是我的文本高度变得大于我的实际图像高度。 在这种情况下,图像不应重新缩放,而应按照上述原始问题中的描述进行裁剪和居中。 这可以做到吗? 您可以通过慢慢缩小浏览器的宽度来模拟该行为。
【讨论】:
【参考方案12】:这个问题是一个巨大的痛苦。但我终于明白了。 我见过很多复杂的解决方案。现在我看到了,这很简单。
.parent
width:70px;
height:70px;
.child
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
.child img
display:block; /* won't work without this */
height:100%;
margin:0 auto;
【讨论】:
以上是关于position:absolute用法(隐藏溢出部分)的主要内容,如果未能解决你的问题,请参考以下文章