当我调整浏览器大小时，按钮在屏幕上移动

Question

当我调整浏览器大小时，我的按钮在页面上无处不在。同样在移动设备上，它没有按应有的位置定位。其他元素也是如此。你能帮我么？

HTML:

<div id="wrapper">

        <div id="header">

            <div id="header-name">
                <table>
                    <tr>
                        <td id="header-name-cell">
                            <a href="./index.html">
                                Nl-Darts
                            </a>
                        </td>
                        <td>
                            Voor al uw dart nieuws!
                        </td>
                    </tr>
                </table>
            </div>

        </div>


        <div id="content">

            <div id="landingpage-intro">

                <h2>I gotta piss</h2>
                <p>
                    Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine.
                    You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water.
                    We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem,
                    we are connected, you and I. We're on the same curve, just on opposite ends.
               </p>

                <h2>No, motherfucker</h2>
                <p>
                    Well, the way they make shows is, they make one show. That show's called a pilot.
                    Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
                    Some pilots get picked and become television programs. Some don't, become nothing.
                    She starred in one of the ones that became nothing.
               </p>

            </div>

            <div id="landingpage-button"><a id="landingpage-link" href="http://www.google.com">Go to full website</a></div>

        </div>


        <div id="footer">

        </div>

    </div>

CSS:

body{
  background-image: url("../images/dart-wallpaper.jpg");
  background-attachment: fixed;
  background-size: cover;
}

#wrapper{
  height: 100%;
  width: 100%;
}

#content{
  position: relative;
  top: 60px;
  left: 10%;

  width: 80%;
  min-height: 500px;
  height: auto;

  background-color: rgba(0, 0, 0, 0.5);
  color:white;

  border-radius: 10px;
}



#landingpage-button{
    width:290px;
    height: 50px;
    background-color: rgba(208, 208, 208, 0.7);

    text-align: center;
    line-height: 50px;

    position: inherit;
    left: 40%;
    top: 50px;

    border-radius:5px;
}

我尝试了多种方法，例如改变位置 relative/absolute 和一些其他方法，但它仍然在移动。

另外，还有人在定位元素时有更多提示可以考虑吗？

提前致谢

Answer 1

之所以如此，是因为您将左侧属性设置为 40%。它将始终尝试从左侧开始 40%。删除：

position: inherit;
left: 40%;
top: 50px;

从 #landingpage-button 添加：

margin: 50px auto 0; //50px from top, auto left-right and 0px to bottom

如果您想将它放在容器的中央，请执行此操作。我做了一个例子 here.

Answer 2

Florin 的回答应该有效，但我想推荐使用 em 而不是 px。 Em可作为相对计量单位

当我调整浏览器大小时，按钮在屏幕上移动

When I resize my browser, button moves on screen

html

css

position

css-position