position:absolute
を使用せずに別のdiv画像(背景画像ではありません)の上に画像のdivをオーバーレイする適切なCSSメソッドを探しています。誰でもこれを行う方法を知っていますか?postionを使用せずに画像をオーバーレイする方法:絶対?
答えて
position: absolute
は「不適切」ではありません。これはCSS仕様の一部です! position: relative
、またはfloat
の属性を使用しない限り、要素を他の要素に重ねる方法はありません。
position: absolute
が最も簡単な方法です。何が悪い考えだと思いますか?ため、
div
{
background: url(/images/foo.png) no-repeat;
}
しかし:background-image
<div>
<img src="...">
</div>
は次にDIV与える:
唯一の他の解決策は、このように、背景とDIV内の画像を使用することです私は間違いなくposition: absolute
に固執すると思います。
非常にグリッチデモhereの効果があります。
元の投稿に記載されているように、div内の背景を扱うことはできず、位置に同意できません:絶対は最も簡単ですが、レスポンシブデザインには理想的ではない –
あなたは、負のマージンを使用して、互いの上に/重複要素をオーバーレイすることができます。 例:
#b{
margin-left:-10px;
}
これの左側(:スパンのような、ブロック型の素子ではなく、インラインこれはディスプレイであると仮定して)であるどのような重ね、左10pxのに素子b
を移動します。
時間の90%、負のマージンは悪い考えです。一部のブラウザにはバグがあり、元のオブジェクト用に予約されている「レイアウトされた領域」は変更されません。私はOPがアイデアを求められていることを知っていますが、マイナスマージンよりも 'position:absolute; 'を使うことをお勧めします。 – jfriend00
@ jfriend00私は同意しますが、「位置を使わないで:絶対」は質問の不可欠な部分です。 –
私はOPの利益のために応答していました。重複するオブジェクトの絶対配置よりも良い選択肢はないと思います。なぜ彼らが絶対的な位置づけを避けようとしているのかを説明すれば助けになるでしょう。彼らは、親に 'position:relative'を使う方法を理解していないと思う。 – jfriend00
- 1. オーバーレイ画像は絶対に2divsの間
- 2. クリップボードを使用せずに画像をコピーする方法は?
- 3. リンクと画像の絶対URLのみを使用する方法
- 4. 画像をソフトエッジでオーバーレイする方法
- 5. 画像の絶対位置
- 6. 画像の絶対位置?
- 7. Django:ImageFieldに相対画像と絶対的な画像パスを保存する
- 8. 送信ボタンを使用せずに画像をアップロードする方法は?
- 9. transformを使用せずに画像を縮小する方法:scale()
- 10. BufferedImageを使用せずに画像のピクセルカラーを取得する方法は?
- 11. docker mavenプラグインを使用して絶対パスからドッカー画像にファイルをコピーする方法
- 12. 大きい画像または小さい画像を使用せずにElevatezoomを使用して画像をズームする方法/シングル画像
- 13. cutomunboundcolumnイベントを使用せずに画像パスからgridviewセルに画像を表示する方法は?
- 14. 絶対パスを使用するたびに糸くずれエラー
- 15. Pythonライブラリを使用したオーバーレイ画像
- 16. 1つのdivを別のdivにオーバーレイする方法(絶対位置なし...)?
- 17. CKEDITORからデータベースに画像ソースを保存する際の絶対URLの使用方法
- 18. 絶対divを絶対divに配置する方法
- 19. 絶対値または負の値を使用せずにドロップダウンを作成する方法
- 20. NDKプロジェクト用にアンドロイドスタジオの画像の絶対パスを取得
- 21. レンダラーを使用せずにJTableに画像を追加する
- 22. Androidでズームとパン画像オーバーレイを使用する最も良い方法は?
- 23. プレビューを表示せずに画像をキャプチャする方法
- 24. アブソリュートを使用せずにノーマルdivにスティッキdivをオーバーレイする
- 25. Android:スケーリングせずにクロップ画像を中心にする方法
- 26. プラグインを使用せずに画像を保護する
- 27. 画像とオーバーレイを同時にパン/ズームする方法は?
- 28. ビデオサムネイル画像に再生ボタンをオーバーレイする方法は?
- 29. CSSの画像に灰色のオーバーレイを挿入する方法
- 30. 画像をカメラプレビューSurfaceViewにオーバーレイし、保存する方法は?
なぜ 'position:absolute'を使用できないのですか? –
親の 'position:relative'と' position:absolute'を組み合わせることは、ページ全体のレイアウトを保存しながら2つのオブジェクトを重ね合わせる非常に良い方法です。これは、通常のHTMLボックスモデルでレイアウトできる自己完結型コンテナを作成しますが、コンテナ内ではオーバーラップを作成するために位置を使用します。 – jfriend00
あなたは本当になぜあなたがポジションを避けようとしているのかを説明する必要があります:絶対的です。なぜなら、それはおそらく最良の解決策であり、おそらくあなたが心配していることを解決する方法があるからです。 – jfriend00