当前位置: 首页 > 面试题库 >

位置元素垂直固定,绝对水平固定

傅穆冉
2023-03-14
问题内容

这是我要完成的工作:

我需要一个按钮,该按钮与div的右侧保持一定距离,并且无论视口的大小如何,该按钮始终与div的侧面保持相同的距离,但是会随窗口滚动。

因此,始终是div右侧的x像素,而始终是视口顶部的y像素。

这可能吗?


问题答案:

水平放置固定元素(基于另一个元素)

免责声明 :此处提供的解决方案在技术上并非如问题标题所述为“绝对水平
”,而是实现了OP最初想要的功能,固定位置元素与另一个元素的右边缘为’X’距离,但固定在垂直滚动。)

我喜欢这些类型的CSS挑战。作为概念证明,是的,您可以得到想要的东西。您可能需要调整一些东西以满足您的需要,但是这里有一些通过FireFox,IE8和IE7的示例html和css(当然IE6没有position:fixed)。

HTML:

<body>
  <div class="inflow">
    <div class="positioner"><!-- may not be needed: see notes below-->
      <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;} /*may not be needed: see below*/
div.fixed {
  width: 80px; 
  border: 1px solid red; 
  height: 100px; 
  position: fixed; 
  top: 60px; 
  margin-left: 15px;
}

关键
是根本不设置leftright的水平位置,div.fixed而要使用两个包装div来设置水平位置。的div.positioner


需要的,如果div.inflow是一个固定的宽度,随着左边距div.fixed可以设置在容器的已知宽度。但是,如果您希望容器比一个容器具有一定的宽度,那么您需要div.positioner将推div.fixed到第一个的右侧div.inflow

编辑: 作为一个有趣的方面说明,当我设置overflow: hidden(应一个需要这样做)的div.inflow没有影响
的固定位置的div被对方的边界之外。显然,固定位置足以使其脱离包含div的上下文overflow



 类似资料:
  • 问题内容: 我想创建一个以动态宽度和高度为中心的弹出框。我曾经为此。没有它,则水平居中,但不能垂直居中。添加后,它甚至没有水平居中。 这是完整的设置: 如何使用CSS在屏幕上将此框居中? 问题答案: 基本上,您需要设置div 并将其居中放置在div的左上角。您还需要将和设置为div的高度和宽度的负一半,以将中心移到div的中间。 因此,在提供(标准模式)的情况下,此操作应: 或者,如果你不关心垂直

  • 问题内容: 我已经有一段时间了,这似乎是一个Chrome重绘错误,尚未修复。因此,我正在寻找任何权宜之计。 主要问题是页面上的元素具有使用以下内容的背景图像时: 如果另一个元素固定并具有子视频元素,则它将导致具有背景图像的元素消失。 现在,它可以在Safari(以及Firefox和IE)中正常运行,因此这并不是Webkit的问题。我已经应用了一些没有用的建议属性。 目前,我的解决方案只是通过媒体查

  • 本文向大家介绍写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法相关面试题,主要包含被问及写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法时的应答技巧和注意事项,需要的朋友参考一下 flex布局;还有就是可以用定位也可以实现等等; flex:父div:{display:flex; justify-content: center;align-items: center;}; 定位方

  • 我创建了一个固定在页面底部的容器。但是,容器随后溢出页面,填充规则被完全忽略。我在论坛上搜索过,但找不到一个解决问题的方法。我试过使用position absolute,也试过使用Javascript计算滚动条宽度,但都没有用。 null null

  • 本文向大家介绍写出固定子容器在固定的父容器下水平垂直居中的布局相关面试题,主要包含被问及写出固定子容器在固定的父容器下水平垂直居中的布局时的应答技巧和注意事项,需要的朋友参考一下 1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;transform:translate3d(-50%,-50%,0). 2.父容器 d

  • 问题内容: 好的,我注意到了一些东西,但是在CSS规范中找不到。样式化元素将相对于浏览器视口绝对定位。如果将固定位置的元素放置在另一个元素内会怎样?CSS示例如下: 和HTML: 据我所知,该元素相对于其最近的父元素也是固定位置的。这在所有浏览器中都可以使用吗?另外,它是错误还是故意行为? 到目前为止,我在互联网上没有找到关于此主题的任何内容,只是“固定位置使其固定在页面上”。 问题答案: 固定和