Относительное и абсолютное позиционирование. Принудительная логотип перейти на углу

Предположим, у меня есть такая ситуация:Относительное и абсолютное позиционирование. Принудительная логотип перейти на углу

Вы можете увидеть несколько основных частей:

панель (граница красный)
Изображение
логотип
Названное

И мне нужна эта настройка:

Так что логотип нужно встать. Обычно каждый раз, когда я пытаюсь сделать изображение 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>

источник

2016-06-23 Denis Rozimovschii

Пожалуйста, проверьте этот адрес. http://codepen.io/nehemc/pen/YWpmMb – Nehemiah

Так я добавил position:relative в контейнер и position:absolute; top:0; right:0 с логотипом

.body { 
    width: 100%; 
} 
.panel { 
    border: 1px solid red; 
    background-color: blue; 
    margin: 50px; 
    position:relative; 
} 
img { 
    width: 100%; 
    height: 200px; 
} 
.logo { 
    background-color: red; 
    border: 1px solid yellow; 
    width: 100px; 
    position:absolute; 
    top:0; 
    right:0; 
}

https://jsfiddle.net/3gusz58x/

Поскольку изображение не движется и требует, чтобы изменить его размеры, вы можете просто сделать логотип перемещается туда, где вам нужно, с помощью absolute. Если вы сделаете его абсолютным, вам нужно предоставить его контейнер (или, по крайней мере, контейнер, в который вы хотите, чтобы он содержался) position:relative;, так что он должен быть где-то.

источник

2016-06-23 17:23:33 ntgCleaner

Спасибо, теперь это более понятно. –

@DenisRozimovschii, Вы поняли! – ntgCleaner

Относительно панели. Абсолютный на верх логотипа: 0, справа: 0 ntgCleaner был на 34 секунды быстрее, поэтому примите его ответ.

<!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 { 
 
      position: relative; 
 
      border: 1px solid red; 
 
      background-color: blue; 
 
      margin: 50px; 
 
     } 
 
     img { 
 
      width: 100%; 
 
      height: 200px; 
 
     } 
 

 
     .logo { 
 
      position: absolute; 
 
      top:0; 
 
      right: 0; 
 
      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>

источник

2016-06-23 17:24:08 zer00ne

Хахаха, согласитесь, какой бы ответ вам ни понравился! – ntgCleaner

Итак, вы сделали положение изображения относительно ближайшего родственника? –

@DenisRozimovschii Вам не нужно ничего делать с изображением. Если вы хотите переместить логотип, измените этот тип позиции – ntgCleaner

вам нужно иметь position:relative в родительском .panel и использовать position:absolute в .logo с top \ right набор для 0

Если вы не имеете position:relative в родительских и используя position:absolute, этот элемент выйдет из потока относительно DOM

абсолютное

Не оставляйте пространство для элемента. Вместо этого поместите его в заданное положение относительно его ближайшего расположенного предка, если любой или иным образом относительно исходного содержащего блока.Абсолютно позиционируемые поля могут иметь поля, и они не сбрасываются с любыми другими полями.

Смотреть подробнее о position

.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-23 17:25:50 dippas

Относительное и абсолютное позиционирование. Принудительная логотип перейти на углу

ответ

Смежные вопросы