如何将 div 按钮固定在屏幕右侧？

Question

我有一个 div 按钮，由两块 div 和一个 parent div 组成。该按钮必须位于屏幕的右侧。但它不会在更改屏幕分辨率时保持静止（例如；100%，%75）

parent div css:

.help-parent{
    position: "absolute";
    top:"0px";
}

帮助图标 css :

.help {
    position: absolute;
    color: rgb(243, 77, 0);
     display:inline-block;
    text-align: right;
    top: 50px;
    left: 1490px;
    height: 30px;
    z-index: 11;
    padding-top: 5px;
}

秒 div :

.help-button {
    position: absolute;
    text-align:left;
    top:50px;
    background-color:rgb(243, 77, 0);
    display:inline-block;
    width:200px;
    height:31px;
    z-index: 10;
    left:1500px;
}

将屏幕分辨率 %100 更改为 %75 时向左滑动；

我希望按钮保持在固定位置。我怎样才能做到这一点？

我根据@greg_的回答修改了。我从 child divs 中删除了 absolute 并且我添加了 vw 95 和 absolute position 到 parent div。 div 固定为右。在我从 child 中删除 absoulute 之后，divs 彼此分开。我如何合并 child divs ?

Answer 1

我相信，left你要多考虑一下。

Answer 2

child div 应与 parent 一起移动，因此删除 child div 的任何位置 css。对于 parent，请尝试使用视口单位 (vh, vw)。这将确保位置始终相对于视口。 Parent div css:

.help-parent {
position: absolute;
top:0;
left:95vw;
}

1vw = 视口宽度的 1%，因此 95vw 将使您的按钮保持在视口宽度的 95%（最右侧）。更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/length

Answer 3

您添加了一个固定的 left 值。使用 right 或 left: 90xw

Answer 4

您忘记了 position 的重要性以及它与父元素相关的作用。

如果父级 position 也设置为 relative 或 fixed 等，则绝对仅适用于父级

我在下面举了一个例子来说明它是如何工作的。

有关 CSS 个职位的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/position

/* container to set a base line */
.menu-bar {
  position: fixed; /* fixed to the viewport */
  height: 50px;
  width: 100vw;
  top: 0; /* set to top of viewport */
  overflow: hidden;
  /* not question related styling */
  background: #fff;
}

/* set elements to stick within it's parent element */

.stick {
  position: absolute; /* stick to current parent */
  height: 50px;
  width: 100px;
  top: 0; /* stick to top of parent */
  /* not question related styling */
  background: red;
}

.left {
  left: 0;
  margin-left: -50px; /* negative to go beyond the viewport */
  /* not question related styling */
  text-align: right;
}

.right {
  right: 0;
  margin-right: -50px; /* negative to go beyond the viewport */
}

.left:hover {
 margin-left: 0;
}

.right:hover {
 margin-right: 0;
}

<nav class="menu-bar">
  <span class="stick left">Left</span>
  <span class="stick right">right</span>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et laoreet tellus. Vivamus iaculis dui quis blandit porttitor. Morbi egestas turpis eget maximus porttitor. Phasellus a neque imperdiet, mattis tortor a, convallis tellus. Aenean dignissim at lectus ut varius. Nam a mauris ut magna mollis blandit vel at erat. Quisque in velit bibendum, rhoncus lorem vitae, aliquet nulla. Sed nulla magna, ultricies ac egestas et, bibendum quis enim. Nunc cursus gravida sapien in blandit. Duis dignissim nunc quis finibus dictum. Etiam laoreet, felis in aliquam gravida, lectus nulla vestibulum turpis, in porttitor ligula mi nec risus. Cras vitae augue lectus. In et ligula sapien. Pellentesque lacus erat, ornare sit amet metus id, sollicitudin bibendum purus. Proin in elit metus.

Aenean elementum scelerisque ante, eget vulputate justo interdum quis. Duis luctus tortor bibendum felis dignissim suscipit. Curabitur egestas lectus ut ligula gravida, non aliquet odio auctor. Aliquam placerat, mi at consectetur euismod, nunc quam congue velit, et lacinia purus risus vel arcu. Vestibulum in nisl sed sem rutrum dictum. Quisque egestas porta tortor varius elementum. Duis hendrerit risus sit amet metus commodo pulvinar a a lorem. Nulla facilisis dapibus magna in cursus.

Proin imperdiet sollicitudin nisi consectetur mattis. Fusce euismod neque eu orci interdum, dapibus fringilla libero vestibulum. Nam sed dignissim lectus. Aenean lacus ante, scelerisque vitae viverra eget, vehicula imperdiet purus. Nam ut metus vitae lacus pellentesque imperdiet. Nulla facilisi. In tristique justo sit amet tellus consectetur, id consequat sapien sollicitudin. Curabitur tincidunt neque nibh, ut pharetra tellus maximus cursus. Nullam ac enim lacus. In sed quam a metus venenatis pharetra. Ut placerat quam vitae purus luctus, ac tempor massa volutpat. Mauris dignissim a eros sit amet vehicula.</p>
</main>

如何将 div 按钮固定在屏幕右侧？

how to fix div button to right of screen?

html

css

fixed

css-position

alignment