Question

我有这段代码

＆＃13;

.logo {
    text-align:center;
    position: relative;
    width:100%;
}

.logo img:last-child {
    position:absolute;
    right:40%;
    border: 1px solid black;
}

＆＃13;

<div class="logo">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/250x250">
</div>

＆＃13;

我想将第二张图片放在第一张图片上。但是当我调整屏幕大小时，第一个移动的图像会移动。我希望它能被修复而不能移动。

感谢您的回复！

Answer 1

你应该这样使用 -

<强>更新 -

你需要添加 -

img{
    max-width:100%;
}

-

＆＃13;

img{
  max-width:100%;
}


.logo {
    text-align:center;
    position: relative;
    width:100%;
}

.logo img:last-child {
     position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid black;
  }

＆＃13;

<div class="logo">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/250x250">
</div>

＆＃13;

Answer 2

这应该有用，如果你在.logo上放置一个静态宽度，它将保持在img之上。否则，即使.logo更改其宽度，也只会将其居中。

.logo {
    text-align:center;
    position: relative;
    width:100%;
}

.logo img:last-child {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid black;
}

<div class="logo">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/250x250">
</div>

Answer 3

让我知道。您可能必须将它添加到这两个类并使用z-index将它们叠加在一起。

.logo img:last-child {
  position:absolute;
  left:50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  border: 1px solid black;
}

Answer 4

.logo {
    text-align:center;
    position: relative;
    width:100%;
    
}

.logo img:last-child {
    position:absolute;
    right:40%;
    top:0px;
    border: 1px solid black;
}

<div class="logo">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/250x250">
</div>

将img移动到另一个img而不移动

4 个答案: