Question

我正在构建一个登陆页面，中间有固定的左右图像和内容。在桌面视图中，其工作正常，但在移动视图中，图像与内容重叠。我该如何解决？

    <div class="container">
        <div class="row">
            <div class="col-sm col-lg mt-5 mb-5">
                <div class="text-center">
                    <img src="images/me.svg" class="img-fluid" style="width: 200px">
                </div>
                <div class="text-center" style="  font-family: 'CustomFont',SceneStd-Light;    color: #969595;">
                        UAE’s largest online plant store launching soon in 
                </div>
            </div>
        </div>
        <div class="row pb-5">
            <div class="col-sm text-center">
                <img src="images/bahrain.svg"  style="height: 150px">
                <div class="text-center pb-2 pt-2"><span>Bahrain</span></div>
            </div>
            <div class="col-sm text-center">
                <img src="images/saudi.svg"  style="height: 150px">
                <div class="text-center pb-2 pt-2"><span>Bahrain</span></div>
            </div>
            <div class="col-sm text-center">
                <img src="images/kuwait.svg"  style="height: 150px">
                <div class="text-center pb-2 pt-2"><span>Bahrain</span></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm col-lg mt-5 mb-5">
                <div class="text-center">
                    <a href="#"><img src="images/ae.svg" class="img-fluid" style="width: 200px"></a>
                </div>
                <div class="text-center">
                    <a href="#"><img src="images/uae.svg" style="height: 150px"></a>
                </div>
                <div class="text-center pb-2 pt-2"><span>Visit our UAE store</span></div>
            </div>
        </div>
    </div>
    <div class="right">
    <a href="#">    <img src="images/right.png" class="img-responsive layout-image"  ></a>

    </div>

.left{ 

  left: 0;
  width: 150px;
  height: 100%;
  position: absolute;}

.right{
     top: 0px; 
  right: 0;
  /*width: 150px;*/
  height: 100%;
  position: absolute;}
  .layout-image{height: 100%}

在桌面视图中

在移动视图中

如何在移动设备和平板电脑视图中解决此问题。

Answer 1

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index -->

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

有多种方法可以执行此操作，在我提到@bpolar时可以使用z-index。另一种方法是使用媒体选择器，使您可以针对不同的屏幕尺寸使用不同的CSS属性

示例：

@media (min-width:1281) {
    image {
        width:200px;
    }
}
@media (max-width:1280) {
    image {
        width:100px;
    }
}

此代码将以不同的显示宽度显示不同大小的图像，您可以将它们视为if语句。这种方法的好处是您可以更好地控制它在不同显示配置中的显示方式。话虽如此，我认为最好的选择是两者的结合。

如果您需要有关{-{3}}的z-index的更多信息

我希望这是您想要的。

祝你好运。

Answer 2

在这些图像上设置Z索引。诀窍在于，内容需要比图片更高的位置。

示例：

.img_class {z-index：-1}

Answer 3

如果您在!important和.left类的z-index之后分配.right关键字，然后在.container类上显式设置更高的z-index，则似乎工作正常。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>plantshop.me</title>
        <link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
        <style>
            .left{ 
                z-index: -1!important;
                left: 0;
                width: 150px;
                height: 100%;
                position: fixed;
            }

            .right{
                z-index: -1!important;
                top: 0px; 
                right: 0;
                /*width: 150px;*/
                height: 100%;
                position: fixed;
            }

            .layout-image{
                height: 100%
            }

            .container{
                z-index:2!important;
            }

        </style>
    </head>
    <body>

        <div class="left"><img src="images/left.png" class="img-responsive layout-image" ></div>

        <div class='container'>
            <div class='row'>
                <div class='col-sm col-lg mt-5 mb-5'>
                    <div class='text-center'>
                        <img src='images/me.svg' class='img-fluid' style='width: 200px'>
                    </div>
                    <div class='text-center' style='font-family:'CustomFont',SceneStd-Light; color: #969595;'>
                        UAE’s largest online plant store launching soon in 
                    </div>
                </div>
            </div>
            <div class='row pb-5'>
                <div class='col-sm text-center'>
                    <img src='images/bahrain.svg'  style='height: 150px'>
                    <div class='text-center pb-2 pt-2'><span>Bahrain</span></div>
                </div>
                <div class='col-sm text-center'>
                    <img src='images/saudi.svg'  style='height: 150px'>
                    <div class='text-center pb-2 pt-2'><span>Bahrain</span></div>
                </div>
                <div class='col-sm text-center'>
                    <img src='images/kuwait.svg'  style='height: 150px'>
                    <div class='text-center pb-2 pt-2'><span>Bahrain</span></div>
                </div>
            </div>
            <div class='row'>
                <div class='col-sm col-lg mt-5 mb-5'>
                    <div class='text-center'>
                        <a href='#'><img src='images/ae.svg' class='img-fluid' style='width: 200px'></a>
                    </div>
                    <div class='text-center'>
                        <a href='#'><img src='images/uae.svg' style='height: 150px'></a>
                    </div>
                    <div class='text-center pb-2 pt-2'><span>Visit our UAE store</span></div>
                </div>
            </div>
        </div>

        <div class='right'><a href="https://plantshop.ae/"> <img src="images/right.png" class="img-responsive layout-image" /></a></div>


    </body>
</html>

Answer 4

尝试在移动视图中将像图片的z-index：9999之类的z-index和叶子z-index增大到9。

在CSS和HTML中响应左右图像

4 个答案: