2016-07-18 22 views
0

私のページの右下に画像(基本的にロゴ)を配置したいと思います。私はTOPとLEFTを使ってやろうとしています。しかし、それは何の効果もありません。さらに、私は絶対的なポジショニングではなく相対的なポジショニングをしたいと思っています。ウェブページの特定の位置に画像を配置するにはどうすればよいですか?

P.S:align = rightを使用して、右側に揃えることができます。しかし、右下に整列させるものもありますか?それだけに関連して要素を移動する

<body style="height: 100vh; width: 100vw" background="images/background.jpg"> 
    ......... 
    <img src="images/logo.png" alt="logo" style="TOP:235px;LEFT:270px;"> 
</body> 
+0

であなたのロゴが表示されます私のために働いていますが、それは固定またはちょうどにしたいですか非常に右下ですか? – theblindprophet

+0

私はそれが非常に右下に欲しいです。 – pythonic

+0

相対位置決めでは、要素を現在の**位置に対してのみ移動させます。 *ビューポートに関連して固定するには**固定**位置を使用します。だから今立つように...あなたはできません。 –

答えて

2

相対位置は、現在のレイアウトによって定義されるよう現在位置です。

は固定ビューポート使用に関連して、それを修正するにはポジショニング

#ImSticky { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
}
<img id="ImSticky" src="http://www.fillmurray.com/140/100" />

注:それは関係なく、ここでこの要素は、滞在する

ページ上のコンテンツの量。スクロールすると上下に動かない。従って、これは正確にあなたが実際にが必要とするものではないかもしれません。

注2:

位置決めはウェブページのレイアウトの非常乏しい方法です。これは非常に柔軟性がなく、より優れた応答性の高いオプションがあります。チェックアウトLearnLayout.com

+0

私は参照してください。しかし、それは一般的なようです。特定の画像を右下に配置する場合はどうすればいいですか。 – pythonic

+1

セレクタで指定します。 – theblindprophet

+1

これは一般的なものです。特定の画像が必要な場合は、IDを付けて使用します。 –

0

position: fixedを使用すると、ビューポートに対して要素を配置できます。

body { 
 
    height: 100vh; 
 
    width: 100vh; 
 
    margin: 0; 
 
} 
 

 
.logo { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
}
<body> 
 
    <img class="logo" src="images/logo.png" alt="logo"> 
 
</body>

+0

** downvoterに:**あなたdownvoteを正当化できますか? –

1

ちょっとこれを試してみてください、それが右 下

<style type="text/css"> 
    .log 
    { 
    position:absolute; 
    right:0;bottom:0; 
    } 

</style> 
<div class="log"> 
    <img alt="mylogo" src="c1.png"> 
</div> 
関連する問題