Question

嗨我觉得这个问题真的很愚蠢，我有一个site我正在努力，我试图将我的个人资料图片绝对定位到一个有相对位置的div，但它不起作用并且父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>

我还没有对实际网站进行更改，但问题可以在浏览器中复制

编辑感谢您的帮助

Answer 1

我认为，你对HTML元素的绝对定位有些不妥。

通过将元素设置为position:absolute;，您可以完全取消文档流程。因此，任何parant元素都没有自动包装。与实际父元素的唯一连接是您可能将该元素设置为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

您将不得不设置容器的宽度和高度，以便为图像提供足够大的基础（容器不会环绕它，因为绝对定位的图像不在文档流中而是坐在上面） - 确保你有位置：容器上的相对位置，并假设你想要图像在左上角然后顶部：0和左：0在图像上。我认为你绝对是分层的定位？如果不是，我会质疑使用绝对定位，因为使底层容器足够大的额外复杂性。

Answer 3

绝对定位时，您应该记住，关于绝对定位是这些元素是从页面上的元素流中移除的。具有此类定位的元素不受其他元素的影响，并且不会影响其他元素。每次使用绝对定位时都要考虑这个问题。过度使用或不当使用会限制您网站的灵活性。

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

JS Fiddle

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

设置位置属性时，最好设置上/下和左/右以获得预期的结果。但是你不应该如上所述，

将顶部和底部设置为0

相反，您应该将设置为顶部或底部属性，因为设置这两个属性会导致它们相互矛盾，浏览器可能会忽略它们或根据实现选择一个。< / p>

试试这个：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;
}

将图像绝对定位到相对div

4 个答案: