相对于 css 中的其他标签更改 position
[英]Changing position relative the other tags in css
问题描述
我的页面上有 3 个框。 第二个（红色）必须固定 position。 如果绿色框的高度增加，它必须增加到顶部，而不是底部。 所以red one的position必须修好。 同样，如果红色的高度增加，黄色必须向前移动到底部。 我怎样才能做到这一点？
这是我的 css 和 html 代码：
#div1 {position:relative;top:0;bottom:0;right:0;background:green;width:100px;height:100px;} #div2 {width:100px;height:140px;position:absolu;bottom:0;left:0;background:red;} #div3 {width:100px;height:100px;position:relative;top:0;right:0;background:yellow;}
<,DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <!-- Start your code here --> <div class="parent"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </div> <!-- End your code here --> </body> </html>
2 个解决方案
解决方案1
0 2022-01-22 18:50:32
这可以通过简单的 CSS 使用一些定位技巧来实现。 首先，由于一切都围绕您的红色 div，您需要将其作为基石。 将此 div 设置为relative position 并将剩余的 div 作为子级插入将允许其所有子级relative对于父级位置绝对定位。
因为使用绝对定位作为百分比将基于相对定位的父级大小，我们可以使用它来始终将底部 div 附加到其底部与position:absolute;top:100% 。 这会将子 div 放置在距父 div 顶部 100% 的位置。
在同样的逻辑下，我们可以使用position:absolute;bottom:100%;将 div 始终放在父级的顶部。
注意：我已将您的 ID 更改为类以允许多个示例
.div1 { width:100px; height:140px; position:relative; top:200px; background:red; /* ignore this in a real case, these allow multiple examples to stack nicely*/ float:left; margin-left: 5px; }.div2 { width:100px; position:absolute; bottom:100%; background-color:green; }.div3 { width:100px; position:absolute; top:100%; background:yellow; }
<,DOCTYPE html> <html> <head> <title>HTML: CSS and JavaScript demo</title> </head> <body> <;-- Start your code here --> <div class="div1"> <div class="div2" style="height:100px;"></div> <div class="div3" style="height:100px;"></div> </div> <div class="div1"> <div class="div2" style="height:200px;"></div> <div class="div3" style="height:200px:"></div> </div> <div class="div1" style="height;190px"> <div class="div2" style="height:120px;"></div> <div class="div3" style="height:227px:"></div> </div> <div class="div1" style="height;190px"> <div class="div2" style="height:20px;"></div> <div class="div3" style="height:360px;"></div> </div> <!-- End your code here --> </body> </html>
解决方案2
0 2022-01-22 19:13:07
如有疑问，请围绕您要操作的元素创建更多父元素或包装元素。
* { box-sizing: border-box; }.parent { position: absolute; top: 0px; left: 0px; border: 5px solid #0000ffc0; width: 100%; height: auto; } #div1-wrapper { border: 2px solid lime; position: relative; top: 0; left: 0; width: 100%; height: 100px; } #div1 { position: absolute; bottom: 0px; left: 0; background: green; width: 100px; height: 20vh; } #div2-wrapper { border: 2px solid #ff3300; position: relative; top: 0; left: 0; width: 100%; height: 30vh; } #div2 { width:100px; height: 30vh; position: absolute; top: 0; left: 0; background: red; } #div3-wrapper { border: 2px solid #ffff00; position: relative; top: 0; left: 0; width: 100%; height: 100px; } #div3 { width: 100px; height: 100%; position: relative; top: 0; right: 0; background: yellow; }
<body> <!-- Start your code here --> <div class="parent"> <div id="div1-wrapper"> <div id="div1"></div> </div> <div id=div2-wrapper> <div id="div2"></div> </div> <div id=div3-wrapper> <div id="div3"></div> </div> </div>
我为每个名为#div 的元素创建了一个包装器。 #div1 周围的包装器是#div1-wrapper，然后是#div2-wrapper，依此类推...
只是为了确保您覆盖任何本机浏览器 position 样式，请提供 position: 相对于每个包装器。 顶部：0 和左侧：0。这将确保每个元素都从 .parent 元素的最左侧开始，并且每个元素都在最后一个元素的末尾之后开始。
如果您希望 #div1 随屏幕大小而增长和缩小，请给它一个以 vh 为单位的高度，而不是像素。 #div1 的外包装应该是 position: relative，但 #div1 元素本身应该是 position: absolute。 （如果您尝试将其 position 设置为相对，它将按照您的需要粘在其包装的顶部，而不是底部。
您说您希望红色 div (#div2) 从顶部固定，但能够在下方增长和缩小。 为此，您需要将#div2 的 position 设置为绝对值，位于 position: 相对包装器内部。
您还需要确保它的包装器 (#div2-wrapper) 的高度设置为 vh，而不是像素。 这样，整个外包装就会增长和收缩。 为了让内部元素 (#div2) 随之增长和缩小，请将其高度设置为父元素的 100%。
接下来，将#div3-wrapper 设置为 position 相对值和您选择的设置高度（在本例中为 100 像素）。
最后，将 #div3（黄色 div）设置为 height: 100%;
为了使交互更清晰，我给了最外层的父元素一个蓝色边框，我给每个#div-wrapper 一个与内部#div 匹配的边框颜色，并在所有元素上设置了 box-sizing: 边框框。
将.position与CSS位置一起使用：相对不能按预期工作
[英]Using .position with css position: relative not working as expected
更改position：fixed为position：relative时的Safari渲染问题
[英]Safari rendering issue when changing position:fixed to position:relative
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.