位置分配絕對正確

在當前環境中，以下代碼有效。位置分配絕對正確

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

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

但是它不保持其位置，而不是總是在右邊。

如何驗證碼是固定的，因此：

格按鈕始終堅持在窗口右側
格鍵，則不論維持顯示器的分辨率或窗口，如果不同的用戶即調整其位置具有不同的顯示器分辨率，按鈕應位於所有人的相同（右側）位置，並應通過手動窗口調整大小保持其位置。

來源

2017-08-28 Adeel

也許用'right'，而不是'left'？ – j08691

使用right:0而不是left:400px。這將div放在頁面的右側。由於您有width:300px，因此您需要text-align:right，以便按鈕出現在div的右側。

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

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

作爲一個側面說明，你一般要避免!important使用在可能的情況。有時，就像使用某些第三方插件時一樣，這可能是不可能的，但是如果您可以以更好的特異性優先於!important來覆蓋樣式。

來源

2017-08-28 20:52:09

這真棒！非常感謝您提供這樣的快速解決方案。想想我必須添加一個文本對齊。奇蹟是一個JavaScript的noob，哈哈。再次感謝！ – Adeel

根據我對您的問題的理解，您希望您的按鈕被固定在右側，而不管屏幕分辨率如何。簡單的解決方案是隻使用正確的，而不是使用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>

來源

2017-08-28 21:03:16

位置分配絕對正確

回答

相關問題