Блог

Главная - Вопросы по программированию - Как сохранить логотип в том же положении, если я изменил поле

Как сохранить логотип в том же положении, если я изменил поле

#html #css #position #margin #behind

#HTML #css #положение #поле #за

Вопрос:

У меня есть логотип за текстом, и каждый раз, когда я изменяю поле из другого div, оно меняет позицию. Первый — из PUG, а 2-й — из css

 .column(span="row")    
    h1.first-title Bmw M4 
    img(src="asset/image/M-emblem.png", alt="").icon__M 

img.icon__M{
        max-width: 80px;
        height: auto;
        position: absolute;
        z-index: 0;
        right: 107px;
        top: 177px;
    }

Я использовал абсолютную позицию для значка и относительную для div и z-индекса, чтобы разместить логотип позади текста

Комментарии:

1. Если относительный элемент переместился на запас, положение абсолютного элемента также изменится в соответствии с ожидаемым относительным перемещением элемента. В противном случае измените свой подход, как указано @LaurentC в ответе.

Ответ №1:

Вы ищете что-то подобное?

Я использую flexbox display для центрирования текста H1 и фонового изображения для добавления логотипа.

 .c {
  background-image:url('https://www.gamasutra.com/db_area/images/news/2018/Jun/320213/supermario64thumb1.jpg');
    background-position:center center;
  background-repeat:no;
  background-size:cover;
    height:200px;
    width:200px;
  display:flex;align-items:center;justify-content:center;
}  
 <div class="c">
  <h1>BMW X4</h1>
</div>

Codepen: https://codepen.io/larrytherabbit/pen/gOMaBYy

Комментарии:

1. Не работает, если я изменяю ширину и высоту, также меняю h1

2. Хорошо, так в чем проблема с текущим отображением?

3. Текст идет влево, я хочу, чтобы эмблема находилась за этим M вот так ibb.co/DVVqPqf