问题:
用户试图创建一个按钮与视口保持固定的垂直距离,同时与 div 的右边缘保持特定距离,无论视口如何
解决方案:
水平定位:
虽然“绝对水平”定位在技术上无法通过所提供的实现解决方案,就可以达到与div右边缘保持固定距离的目的。通过避免为水平固定元素设置 left 或 right 属性,容器 div 用于控制其水平位置。
垂直定位:
元素被定位使用position:fixed属性垂直固定。通过设置顶部值,无论视口大小如何,都会保持垂直定位。
代码示例:
以下代码演示了实现:
HTML:
<body> <div class="inflow"> <div class="positioner"> <div class="fixed"></div> </div> </div> </body>
CSS:
div.inflow { width: 200px; height: 1000px; border: 1px solid blue; float: right; position: relative; margin-right: 100px; } div.positioner {position: absolute; right: 0;} div.fixed { width: 80px; border: 1px solid red; height: 100px; position: fixed; top: 60px; margin-left: 15px; }
关键注意事项:
以上是如何相对于 Div 垂直固定和水平定位元素?的详细内容。更多信息请关注PHP中文网其他相关文章!