1

そのような状況があるとします：

ここに画像の説明を入力

いくつかの主要な部分を見ることができます:

  • パネル（ボーダーレッド）
  • 画像
  • ロゴ
  • タイトル

そして、私はこのセットアップが必要です:

ここに画像の説明を入力

だから、ロゴは立ち上がる必要があります。absolute通常、画像とロゴを作成しようとするたびにrelative、右に浮かせて動作しますが、画像の下にもあるタイトルを失います。

また、タイトルを相対的にして、値を付けて上からプッシュすることはできません。これは、画像がレスポンシブで、height.

これが私が使用しているコードです。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style>
        .body {
            width: 100%;
        }

        .panel {
            border: 1px solid red;
            background-color: blue;
            margin: 50px;
        }
        img {
            width: 100%;
        }

        .logo {
            background-color: red;
            border: 1px solid yellow;
            width: 100px;

        }
    </style>
</head>
<body>

    <div class="panel">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVxPtnNvc1ZwknRSdJZIPjrmUHitXdUU_-TT3wuIF-mWND6sXV" class="img-responsive" alt="picture nature">
        <div class="logo">
            I'm a logo
        </div>
        <h1>I'm a title, hello</h1>
    </div>

</body>
</html>
4

3 に答える 3

1

position:relative親に を持ち、 \を設定して inを.panel使用する必要がありますposition:absolute.logotopright0

position:relative親に持っていない場合、position:absoluteその要素を使用するとDOMに関するフローが終了します

絶対の

要素のためのスペースを残さないでください。代わりに、指定された位置に、最も近い位置にある祖先がある場合は相対的に、そうでない場合は最初の包含ブロックに相対的に配置します。絶対配置ボックスにはマージンを設定でき、他のマージンと一緒に折りたたむことはありません。

ポジションの詳細を見る

.body {
  width: 100%;
}
.panel {
  position: relative;
  border: 1px solid red;
  background-color: blue;
  margin: 50px
}
img {
  width: 100%
}
.logo {
  position: absolute;
  top: 0;
  right: 0;
  background-color: red;
  border: 1px solid yellow;
  width: 100px
}
<div class="panel">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVxPtnNvc1ZwknRSdJZIPjrmUHitXdUU_-TT3wuIF-mWND6sXV" class="img-responsive" alt="picture nature">
  <div class="logo">
    I'm a logo
  </div>
  <h1>I'm a title, hello</h1>
</div>

于 2016-06-23T17:25:50.843 に答える