Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.1k views
in Technique[技术] by (71.8m points)

javascript - Containers overlapping when size of window is small

When the window size is small(or while using it on some small screen phones) the buttons are overlapping the heading. Here's the code:

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.x2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center
}
<body>
<div style="background-color: #E9ECEF">
    <br><br>
    <center>
      <h1>Survey Management System</h1>
    <center>
</div>

      <div class="x2">
        <p><button Class="btn btn-warning" onclick="document.location = 'user/registration.html'">Register</button></p>
        <p><button Class="btn btn-warning" onclick="document.location = 'user/Login1.html'">Login</button></p>
        <p><button Class="btn btn-warning" onclick="document.location = 'admin/alogin.html'">Admin Login</button></p>
      </div>

I am a beginner and any help regarding this will be highly appreciated. Any other suggestion that you find helpful are also welcomed.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The problem is absolute positioning. If you use absolute positioning, you break the links of your div from your page (if no relative positioning exists in parent).

position: absolute It looks the first element which has a relative position on parent level and it adjusts its position accordingly to the relative element. If no relative element exists in the parent tags, it adjusts its position accordingly to the page.

Try to give a

position: relative;

to your x2 and try again. If you want to center things, you must give the top position like

top: calc(50% + "height of header");

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...