调整页面大小时，页面上的元素会移动

Question

我尝试了不同的属性，但我的 CCS 就是不在原位。我已经尝试过 absolute 和 fixed 但没有运气。我希望他们留在他们所在的位置，即退出按钮左侧的问候语和右侧的图片。如果我调整大小或在不同的屏幕上查看等，我希望它们在同一个地方。

这是我的index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

.grid {
  position: relative;
}
.grid:before {
  background-color: #f0f0f0;
  box-shadow: 0px 0px 0px 1px #dddddd inset;
  content: "";
  height: calc(100% - 2rem);
  left: 1rem;
  top: 1rem;
  position: absolute;
  width: calc(100% - 2rem);
}
.ui.divided.grid:before,
.celled.grid:before {
  display: none;
}
.ui.aligned .column:after {
  display: none !important;
}
.grid .column:not(.row):not(.grid):after {
  background-color: rgba(86, 61, 124, 0.15);
  box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
  content: "";
  display: block;
  min-height: 50px;
}
@media only screen and (max-width: 768px) {
  .stackable.grid:before {
    width: 100%;
    left: 0em;
  }
}

这是我的app.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.signout-with-google-btn,
.login-with-google-btn {
  position: relative;
  transition: background-color 0.3s, box-shadow 0.3s;
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 999px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  color: #757575;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 12px 11px;
}
.login-with-google-btn:hover {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.login-with-google-btn:active {
  background-color: #b8b8b8;
}
.login-with-google-btn:focus {
  outline: none;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25),
    0 0 0 3px #c8dafc;
}

.signout-with-google-btn {
  top: 0.5px;
  left: 69%;
  position: absolute;
  margin: 20px 10px 10px 10px;
}
.login-with-google-btn {
  top: 1.6%;
  left: 70%;
  position: absolute;
}
.profile-pic {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  top: 0.2%;
  left: 75%;
  position: absolute;
  margin: 10px 10px 10px 20px;
}

.greeting {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  top: 4%;
  position: absolute;
}

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>

Answer 1

尝试为一个或两个元素添加边距以将它们彼此分开。如果您希望它们位于完全相同的位置，请尝试使用展示位置的百分比。 right: 98%; 两者都可能有效。

Answer 2

理想情况下，我们需要查看您 header 的 html，但这里有一个示例：

header 设置为 display: flex 并且 flex-direction: row 使其不换行。

header里面的button-container也是一样的

魔法是 justify-content: space-between - 这会将 <header> 下的每个 child 推向左右，因为我们在 [=34= 上有 flex-direction ], 它们不换行。

尝试下面的代码片段并调整大小以查看实际效果。

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

header .button-container {
  display: flex;
  flex-direction: row;
}

<header>
  <div class="greeting">Hello, name</div>
  <div class="button-container">
    <div class="button">Button 1</div>
    <div class="button">Button 1</div>
  </div>
</header>

调整页面大小时，页面上的元素会移动

The elements on my page move when the page is resized

html

css

reactjs

css-selectors

jsx