首页 > web前端 > css教程 > 如何相对于 Div 垂直固定和水平定位元素?

如何相对于 Div 垂直固定和水平定位元素?

Patricia Arquette
发布: 2024-12-01 12:01:11
原创
476 人浏览过

How to Vertically Fix and Horizontally Position an Element Relative to a Div?

如何垂直固定和水平绝对定位元素

问题:

用户试图创建一个按钮与视口保持固定的垂直距离,同时与 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如果div.inflow div具有固定宽度,则.positioner div可能不是必需的,允许直接设置固定宽度元素的左边距。
  • 在容器 div 上设置溢出:隐藏不会影响固定元素在其边界之外的定位。

以上是如何相对于 Div 垂直固定和水平定位元素?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板