当我调整浏览器大小时，元素与图像重叠

我正在开发一个简单的投资组合网站。但是，当我通过浏览器元素重新调整大小时，它们会与后台图像重叠。当我调整浏览器大小时，元素与图像重叠

<div class="container"> 
     <div class="main-heading"> 
      <h1>Jegath S</h1> 
     </div> 

     <div class="desc"> 
      <p> 
       I am a web developer and designer 
       from INDIA . I engoy building anything 
       using code . Need a website ? 
       Leave it to me :) 
      </p> 
     </div> 

     <div class="explore-button"> 
      <button class="btn"><a href="#works">Explore</a></button> 
     </div> 

     <div class="social-media"> 
      <i class="fa fa-facebook" aria-hidden="true"></i> 
      <i class="fa fa-envelope" aria-hidden="true"></i> 
      <i class="fa fa-phone" aria-hidden="true"></i> 
     </div> 
    </div>

这里是CSS代码

*{ 
    margin: 0; 
    padding: 0; 
} 

body ,html{ 
    font-family: 'Open Sans', sans-serif; 
    background: f6f6f6; 
    height: 100%; 
    width: 100%; 
} 

.container{ 
    font-family: 'Vollkorn', serif; 
    background-image: url(../images/bg-img.jpg) ; 
    background-repeat: no-repeat; 
    min-height: 100%; 
    background-position: right; 
    position: relative ; 
} 

.main-heading{ 
    position: absolute; 
    font-family: serif; 
    font-size: 60px; 
    top: 180px; 
    left: 565px; 
    display: inline-block; 
} 

.desc{ 
    width: 304px; 
    text-align: justify; 
    letter-spacing: 1px; 
    position: absolute; 
    top: 400px; 
    left: 410px; 
    line-height: 35px; 
} 

.explore-button a{ 
    color: #fff; 
    text-decoration: none; 
} 

.btn{ 
    width: 110px; 
    height: 42px; 
    background: #9A3FE0; 
    border: none; 
    font-size: 15px; 
    font-weight: bold; 
    letter-spacing: 2px; 
    border-radius: 5px; 
    text-align: center; 
    position: absolute; 
    top: 570px; 
    left: 500px; 
} 


.social-media .fa{ 
    font-size: 25px; 
    display: block; 
    margin-bottom: 30px; 
    margin-left: 45px; 

} 

.social-media .fa-facebook{ 
    position: absolute; 
    top: 50%; 
} 

.social-media .fa-envelope{ 
    position: absolute; 
    top: 40%; 
} 

.social-media .fa-phone{ 
    position: absolute; 
    top: 60%; 
}

请给我一个解决方案。

这是图像时，浏览器是全幅

这是当浏览器大小

这将是如此有益的，如果任何人都可以建议我的图像一个办法。提前致谢。

来源

2017-04-22 Jegath Suresh

这是因为你的主标题类，你写道： “左：565px;”。无论您使用的设备的大小如何，浏览器都会按照您告诉他的内容并将h1保持为565。这也适用于desc类和探索按钮。为了使它移动友好，你需要使用媒体查询。查找更多关于它们的信息here。媒体查询所做的是您可以根据设备宽度编写自定义CSS。所以他们是移动友好的。如果你不想打扰媒体查询，你可以将h1，段落和按钮放在正确的位置：x px;而不是左：x px;

来源

2017-04-22 13:22:23 ekko

非常感谢。通过使用“right：x px;”而不是“left”解决了我的问题......非常感谢。我是一个新手.. :-) –

每个人都被困在某个点或另一个，很高兴我可以帮助 – ekko

如果你不想图像和文字重叠，然后使2 div和分配右div的图像作为背景图像和左div给你的文字。在那种情况下，它们不会重叠。

<div class="row"> 
    <div class="container col-lg-6 col-md-6 col-xs-6 col-sm-6 right"> 
    Hi this is the text area. Write anything here. 
    </div> 

    <div class="container col-lg-6 col-md-6 col-xs-6 col-sm-6 left"> 

    </div> 
</div> 


    .left { 
    height: 100vh; 
    background-color: #ff0; 
} 

.right { 
    height: 100vh; 
}

这是的jsfiddle：https://jsfiddle.net/r7pL5aub/1/

来源

2017-04-22 13:21:58

当我调整浏览器大小时，元素与图像重叠

回答

相关问题