2017-08-28 37 views
0

現在の環境では、次のコードが機能します。それはその位置を維持しないと、右側に常にではないんしかし絶対位置での位置部門

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>

。 divのボタンが常に

  • のdivボタンを問わずさまざまなユーザーならば、すなわちリサイズ表示解像度やウィンドウの地位を維持して、ウィンドウの右側にこだわっ

    • :ように、このコードを固定することができますどのように

      モニターの解像度が異なる場合、ボタンはすべてのボタンと同じ(右側)場所にあり、手動ウィンドウのサイズ変更でその位置を維持する必要があります。

  • +3

    たぶん使う代わりに '' left'のright'? – j08691

    答えて

    1

    left:400pxの代わりにright:0を使用してください。それはdivをページの右側に置きます。 width:300pxがあるので、divの右側にボタンが表示されるように、text-align:rightにする必要があります。サイドノートとして

    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の方が望ましいでしょう。

    +1

    これは素晴らしいです!このような迅速な解決に感謝します。私はテキストアライメントを追加しなければならないと思った。 JavaScriptのnoob、笑の驚異。再度、感謝します! – Adeel

    0

    あなたの質問を理解しているように、画面の解像度に関係なく、右側にボタンを固定する必要があります。簡単な解決策は、css leftパラメーターを使用する代わりに、右のみを使用することです。私はあなたのための実用的なソリューションを作成しました。

    スクロール中にボタンを固定しないで、コンテンツとともにスクロールする必要がある場合は、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>