позиция изображение абсолютно к относительной div

Question

Привет, я действительно чувствую себя глупо, спрашивая об этом, у меня есть site, над которым я работаю, и я пытаюсь позиционировать изображение моего профиля абсолютно в div с положением родственника, t, а родительский div не обтекает img. Я уверен, что это простое решение. Должен ли родительский div иметь высоту и ширину?

.parent { 
 
    position: relative; 
 
} 
 
    
 
#profilepic { 
 
    position: absolute; 
 
}

<div class="parent"> 
 
    <a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank"> 
 
    <img id="profilepic" src="Images/Portraits%20circle.png" alt="profile picture"/> 
 
    </a> 
 
</div> 
 

 

Я не сделал изменения в живой сайт, но пока этот вопрос может быть воспроизведен в браузере

EDIT Спасибо за помощь

Answer 1

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

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

Ваша Идея работает только здесь, если вы точно знаете размер конечного изображения. Тогда вы могли бы использовать что-то вроде этого: https://jsfiddle.net/k98cLdvq/

CSS для этого выглядит как:

.parent { 
    position: relative; 
    border:1px solid #c00; 

    width:200px; 
    height:200px; 
} 

#profilepic { 
    position: absolute; 
    border:1px solid #0c0; 

    width:100px; 
    height:100px; 

    left:50px; 
    top:50px; 
    box-sizing:border-box; 
} 

Добавляя следующие вы получите эффект вы описали:

a:hover #profilepic{ 
    width:120px; 
    height:120px; 

    left:40px; 
    top:40px; 
} 

Answer 2

Вы собираетесь чтобы установить ширину и высоту контейнера, чтобы обеспечить достаточно большую основу для изображения, чтобы сидеть сверху (контейнер не будет обертываться вокруг него, поскольку абсолютно позиционированное изображение выходит из потока документа и i nstead сидит сверху) - убедитесь, что у вас есть позиция: относительная на контейнере и предполагая, что вы хотите изображение в верхнем левом углу, а затем сверху: 0 и слева: 0 на изображении. Я полагаю, вы позиционируете абсолютно для наслаивания? Если нет, я бы поставил вопрос, используя абсолютное позиционирование, учитывая дополнительное усложнение того, чтобы сделать основной контейнер достаточно большим.

Answer 3

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

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning

JS Fiddle

.parent { 
 
    position: relative; 
 
    background-color: green; 
 
    height: 150px; 
 
    width: 200px; 
 
    display: inline-block; 
 
    margin: 2px; 
 
} 
 
#profilepic { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all 0.5s; 
 
    border: 2px solid navy; 
 
} 
 
#profilepic:hover { 
 
    width: 120%; 
 
    height: 115%; 
 
    z-index: 10; 
 
    transition: all 1s; 
 
}

<div class="parent"> 
 
    <a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank"> 
 
    <img id="profilepic" src="//placehold.it/200x150?text=image1" alt="profile picture" /> 
 
    </a> 
 
</div> 
 
<div class="parent"> 
 
    <a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank"> 
 
    <img id="profilepic" src="//placehold.it/200x150?text=image2" alt="profile picture" /> 
 
    </a> 
 
</div> 
 
<div class="parent"> 
 
    <a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank"> 
 
    <img id="profilepic" src="//placehold.it/200x150?text=image3" alt="profile picture" /> 
 
    </a> 
 
</div> 
 
<div class="parent"> 
 
    <a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank"> 
 
    <img id="profilepic" src="//placehold.it/200x150?text=image4" alt="profile picture" /> 
 
    </a> 
 
</div>

Answer 4

При установке свойств позиции, вы лучше от заходящего сверху/снизу и влево/вправо, чтобы получить результаты, которые вы ожидаете.Но вы не должны, как вы уже сказали выше,

установить верхний и снизу 0

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

Попробуйте это: https://jsfiddle.net/9vbojg0w/

HTML

<div class="parent"> 
    <a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank"> 
     <img id="profilepic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Charles_Darwin_seated_crop.jpg/220px-Charles_Darwin_seated_crop.jpg"/> 
    </a> 
</div> 

CSS

/* background-color and width/height only for demonstration 
* width/height can be removed if other elements cause the 
* parent's size to expand 
*/ 

.parent { 
    position: relative; 
    background-color:#ddd; 
    width:200px;   
    height:300px; 
} 

#profilepic { 
    position: absolute; 
    top:20px; 
    left:20px; 
}