HTML CSS定位图像，而不管一切
[英]HTML CSS positioning images regardless of everything
问题描述
我有这个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>
3 个解决方案
解决方案1
2 已采纳 2018-07-30 12:10:10
将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>
解决方案2
1 2018-07-30 12:03:50
而不是相对位置，使用绝对。
解决方案3
0 2018-07-30 12:26:20
如下所示更新您的CSS代码。
.extremewind2 {
z-index: 5;
display: block;
position: fixed;
left: 12%;
bottom: 12%;
}
这将为您工作。 试试吧。
使用HTML / CSS定位图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.