Невозможно изменить положение логотипа
Новичок в веб-дизайне, так что это, вероятно, очень плохо написанный код. Это может быть что-то очень очевидное, но независимо от того, что я изменяю в css логотипа, я не могу заставить его двигаться? Мне нужно переместить логотип вниз.
.header {
padding: 10px 16px;
background-color: darkred;
box-shadow: 0px 10px 20px black;
font-family: arial;
position: relative;
height: 90px;
}
.logo {
position: absolute;
float: left;
margin-top: 50px;
}<div class = "header" id = "myHeader">
<div class = "logo">
<img src = "https://via.placeholder.com/300x90" width=300 height=90>
</div>
</div>Кроме того, не уверен, что вы случайно обрезали закрывающий тег </div> для #myHeader только из фрагмента или исходного кода, но если это последнее, у вас возникнут проблемы.
Возможный дубликат css абсолютное позиционирование не работает должным образомОтвет
Ответы 1
Если вы пытаетесь переместить логотип куда-то на веб-сайте, я думаю, вам не следует использовать float, он будет привязан к какой-либо позиции, которой вы его назначаете, и из-за этого вы не можете свободно перемещать свой div. Вы должны использовать top, left, right, bottom. При этом он заменит вам margin-top. Также вы должны содержать background-repeat: no-repeat, background-size: contain. Таким образом, ваш логотип не будет повторяться, если вы прокрутите страницу вниз. И, наконец, вы должны установить margin: 0 auto, чтобы они не привязывались к другому div, если он у вас есть.
.logo {
position: absolute;
top: 12px; //For example
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}
Если вы пытаетесь использовать позиционирование
absoluteилиrelative, не используйтеfloat, используйтеleft,right,topи/илиbottom, чтобы установить положение элемента.