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

Question

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

父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;
}

第二格：

.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_的答案进行了修改。我从子级div中删除了绝对值，并向父级div添加了vw 95和绝对位置。而div固定为righ。在我从彼此分开的孩子div中删除了绝对提取物之后。如何合并子div？

Answer 1

我相信，您必须多考虑left。

Answer 2

子div应该与父div一起移动，因此请删除子div的所有位置css。 对于父级，请尝试使用视口单位（vh，vw）。这将确保该位置始终相对于视口。 父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>