在 css 和 html 中响应左右图像

Question

I am building a landing page with fixed left and right image and content in the middle. in desktop view its working fine but in mobile view the images overlapping the contents. how do I fix this?

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

In Desktop view

In mobile view

How do I fix this in mobile and tablet view.

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>

There are multiple ways to do this, are mentioned my @bpolar you can use the z-index. Another way of doing it is with media selectors which would allow you to have different css properties for different screen sizes

Example:

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

This code will display images in different sizes for different display-widths, you could see them as if-statements. The benefit of this approach is that you have finer control over how it appears on different display configurations. That being said I think the best option is a combination of the two.

If you need more info about the z-index that can be found here

I hope this is what you're looking for.

Good luck.

Answer 2

Set the Z-index on those images. The trick is that the content needs higher position than the images.

Example:

.img_class {z-index: -1}

Answer 3

If you assign the !important keyword after the z-index for .left and .right classes and then explicitly set a higher z-index on .container class it appears to work ok.

<!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 像 behrain 图像的 z-index:9999 和叶子 z-index 增加到 9。