web-dev-qa-db-ja.com

DIVを右下隅に固定

私はhtmlおよびbody属性を使用して、グラデーションbackgroundおよび花backgroundを website に設定しました。

私はdivを使用して、右下にある花を配置しました。うまく機能しますが、スクロール時には機能しません。右下の画像を画面の下部に貼り付けるにはどうすればよいですか？

cssbackground
23
user195257

position: fixed;ではなくposition: absolute;を設定する必要があります。

これがPositionプロパティの 詳細 です。

.bottomright {
     position: fixed;
     bottom: 0px;
     right: 0px;
}

.demo {
     background-color: HotPink;
     padding: 20px;
     margin: 5px;
}
Hello<br>

<div class="demo bottomright">
   I'm a Div!
</div>

there
40
stephenhay

あなたがdivの中に花を入れ、それを絶対的な底と右に配置すると、これはそこにそれを貼り付けます。

たとえば、このようなものはうまくいきます

#mystylename{
     position:absolute;
     bottom:0;
     right:0;
}

あなたはそれをあなたが望む場所に置くためにそれを微調整する必要があるかもしれません、そしてまた多分Zインデックスを追加するかもしれません

31
Joe Morris

アニメーションが必要な場合は、アニメーションの前にdivを絶対に設定し、アニメーションの後で次の例のように固定に再設定します。

$('.mydiv').animate({
opacity: 1,
right: "50px",
bottom: "50px",
height: "toggle"
}, 1000, function() {
// Animation complete.
}).css('position','fixed');

上記のdivのcssも以下にあります。

.mydiv {
  text-align: center;
  background: #00DD88;
  background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent;
  border-radius: 30px 30px 30px 30px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);  
  margin: 5px 0 10px 15px;
  position: absolute;
  right: -980px;
  width: 200px;
  height: 50px;
  display: none;
  z-index: 100;
}

私はこれが古いことを知っていますが、それは間違いなく誰かを助けるでしょう:)

2
Oliver M Grech

この古い投稿のcssのみのトリックは、divの後にaを置き、上部の要素の下部と重なるように上部に-1.2emを配置することです。

html：

<textarea class="no-whitespace-right">This is a test resize it.</textarea>
<span class="float-lower-left">length could go here</span>

css：

.no-whitespace-right {
  /* any whitespace to the right and the overlap trick fails */
  width: 100%;
}

.float-lower-left {
  position: relative;
  float: right;
  right: 1em;
  top: -1.2em;
  /* Push it up into the element before it. This is a trick for bottom-right */
  right: 1em;
  z-index: 200;
  opacity: 0.5;
  font-weight:bolder;
}

enter image description here

https://jsfiddle.net/qwm3pu8d/

2
TrophyGeek

このタスクを実行するには、JavaScriptを使用する必要がある場合があります。そのようなテクニックはあなたが望む効果を達成しますが、それらは非常にスムーズにアニメーション化されない傾向があります。スクロールすると、そのような「スタック」オブジェクトはスキップして途切れがちになります。私は例を見つけました here が、それを自分で試したことはありません。いくつかの例を検索して、最もクリーンで最新に見える例を試すことをお勧めします。

1
jkndrkn

位置を設定する必要があります：固定。位置の代わりに：絶対;

0
user2654735