Question

我有这个PHP HTML代码。我的问题是，即使没有显示第三张图片，我该怎么做第四张图片的位置也不会改变。这是我要的两张照片：

如果$ randomnumber为1：

如果$ randomnumber为0 ：（您可以看到第四张图片的位置没有改变。）

<html>

<body>
<div>

<style>
.sarga1 {
  z-index: 5;
  display: block;
  position: relative;
  left: 30px;
  top: 100px;
}

.extremewind1 {
  z-index: 5;
  display: block;
  position: relative;
  left: 30px;
  top: 100px;
}

.sarga2 {
  z-index: 5;
  display: block;
  position: relative;
  left: 30px;
  top: 100px;
}

.extremewind2 {
  z-index: 5;
  display: block;
  position: relative;
  left: 10px;
  top: 100px;
}
</style>


<?php
echo '<div class="sarga1">', "<img src='sarga.png'>";
echo '<div class="extremewind1">', "<img src='extremewind.png'>";

$randomnumber = rand(0,1);
echo $randomnumber;

if ($randomnumber == 1)
   echo '<div class="sarga2">', "<img src='sarga.png'>";


echo '<div class="extremewind2">', "<img src='extremewind.png'>";

?>

<div>
</body>
<html>

Answer 1

将div包裹在div position:relative中，并在子项上使用position:absolute。示例：

.sarga1 {
  z-index: 5;
  position: absolute;
  left: 0px;
  top: 0;
}

.extremewind1 {
  z-index: 5;
  position: absolute;
  left: 50px;
  top: 50px;
}

.sarga2 {
  z-index: 5;
  position: absolute;
  left: 100px;
  top: 100px;
}

.extremewind2 {
  z-index: 5;
  position: absolute;
  left: 150px;
  top: 150px;
}

<div style="position:relative">
  <div class="sarga1">Sarga1</div>
  <div class="extremewind1">Extreme Wind</div>
  <!--<div class="sarga2">Sarga 2</div>-->
  <div class="extremewind2">Extreme Wind</div>
</div>

Answer 2

使用绝对值代替相对位置。

Answer 3

如下所示更新您的CSS代码。

.extremewind2 {
    z-index: 5;
    display: block;
    position: fixed;
    left: 12%;
    bottom: 12%;
}

这将为您工作。试试吧。

HTML CSS定位图像，而不管一切

3 个答案: