CSS实现div子元素在右边显示父元素不动
可以使用 CSS 的绝对定位来实现这个效果。具体步骤如下:
- 给父元素设置相对定位,这样子元素的绝对定位将以父元素为参照物。
- 给子元素设置绝对定位,并设置 'right' 属性为 0,这样子元素就会紧贴着父元素的右边。
- 如果需要子元素与父元素底部对齐,可以设置 'bottom' 属性为 0。
CSS 代码示例:
.parent {
position: relative; /* 父元素相对定位 */
width: 200px;
height: 200px;
background-color: #f2f2f2;
}
.child {
position: absolute; /* 子元素绝对定位 */
top: 0; /* 如果需要顶部对齐,可以设置 top 为 0 */
right: 0; /* 子元素紧贴着父元素的右边 */
bottom: 0; /* 如果需要底部对齐,可以设置 bottom 为 0 */
width: 100px;
height: 100px;
background-color: #ccc;
}
HTML 代码示例:
<div class="parent">
父元素
<div class="child">子元素</div>
</div>
原文地址: https://www.cveoy.top/t/topic/ns6l 著作权归作者所有。请勿转载和采集!