Question

在当前环境中，以下代码可以正常工作。

＆＃13;

div.fixed {
  position: fixed !important;
  top: 45px !important;
  left: 400px !important;
  width: 300px;
}

＆＃13;

<div class="fixed">
  <input type="button" onclick="location.href=document.referrer; return false;" value="Previous Page" />
</div>

＆＃13;

然而，它并没有保持其位置，并不总是在右边。

如何修复此代码，以便：

div按钮始终贴在窗口右侧
div按钮保持其位置，无论显示分辨率或窗口大小调整，即如果不同的用户具有不同的显示器分辨率，则按钮应位于所有人的相同（右侧）位置，并且应通过手动调整窗口大小来保持其位置。

Answer 1

使用right:0代替left:400px。这会将div放在页面的右侧。由于您有width:300px，因此您需要text-align:right，以便该按钮显示在div的右侧。

＆＃13;

div.fixed {
  position: fixed !important;
  top: 45px !important;
  right: 0px !important;
  width: 300px;
  text-align:right;
}

＆＃13;

<div class="fixed">
  <input type="button" onclick="location.href=document.referrer; return false;" value="Previous Page" />
</div>

＆＃13;

作为旁注，您通常希望尽可能避免使用!important。有时候，就像使用某些第三方插件时一样，这可能是不可能的，但是如果你能够以更好的特异性覆盖这种风格，那么!important会更好。

Answer 2

根据我对您的问题的理解，无论屏幕分辨率如何，您都希望将按钮固定在右侧。简单的解决方案是使用正确，而不是使用CSS左参数。我已经为您创建了一个可行的解决方案。

如果您不希望在滚动期间按钮处于固定状态，但也应滚动内容，请检查float：right css属性。 https://www.w3schools.com/css/css_float.asp

.fixed{
  position: fixed;
  right: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <input class="fixed" type="button" value="Previous Page" />
    </div>
    <div class="content">
      </br>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
            text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
            book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
            unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
                <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
            text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
            book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
            unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
                <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
            text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
            book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
            unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>
</body>

</html>

将Div放在绝对权利上

2 个答案: