-1
我有以下頁面（請參閱下面的代碼段）。我想定位每個項目，以便當它是一個完整的網頁時，這些元素就是我們想要的位置，但是一旦在狹窄的長寬比（例如移動電話）上觀看它，那麼項目需要相互摺疊。CSS位置相對於絕對
我可以使用position: absolute;獲得完整的網頁。我可以將物品放在我想要的位置。但問題是在移動設備上，這些項目相互重疊。所以我想我需要使用position: relative;。
position: relative;允許項目在狹窄的瀏覽器上彼此摺疊。但是，我似乎無法將物品放在我想要的位置。
在下面的例子中，我想定位的項目如下：
logo
title
text screen-print-one
google apple web screen-print-two
Terms of Service [email protected]
body {
\t font-family: "proxima-nova" ,"Helvetica", sans-serif;
}
/* logo */
.wz-logo {
\t text-align: center;
\t padding: 20px 20px 0px 20px;
}
/* title */
.wz-title {
\t font-size: 120%;
\t color: #B2D137;
\t text-align: center;
\t padding: 0 20px 40px 30px;
}
/* text */
.text-description {
\t padding-left: 10%;
\t padding-bottom: 20px;
\t padding-top: 20px;
\t width: 500px;
}
/* screen-prints */
.screen-prints {
position: relative;
\t float: right;
\t padding-right: 10%;
}
.screen-print1 {
position: relative;
top: 100px;
left: 0;
z-index: 2;
}
.screen-print2 {
position: relative;
\t top: -430px;
\t left: -120px;
\t z-index: 1;
}
/* store */
.store-container {
display: flex;
justify-content: left;
align-items: center;
padding-left: 10%;
}
.store-container .apple, .img-container .google, .img-container .web {
\t padding: 10px;
\t padding-left: 20px;
}
.store-container .google {
\t padding-top: 0px;
\t padding-left: 0px;
\t padding-right: 0px;
\t margin-top: 10px;
}
.store-container .apple {
\t padding-top: 8px;
\t padding-left: 0px;
\t padding-right: 0px;
}
.store-container .web {
\t padding-top: 15px;
}
/* footer */
footer .terms, footer .contact {
\t display:inline-block;
\t padding-bottom: 30px;
\t padding-right: 10px;
\t padding-left: 10px;
}
footer .contact {
\t padding-right: 40px !important;
}
footer a {
\t color: white;
\t text-decoration: none;
\t font-size: 14px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
footer {
\t position:absolute;
\t bottom:0;
\t right: 0;
}<body class="background-image">
\t <div class="wz-logo">
\t \t logo
\t </div>
\t <div class="wz-title">
\t \t title
\t </div>
\t <div class="text-description">
\t \t text
\t </div>
\t <div class="screen-prints">
\t \t <div class="screen-print1">screen-print-one
\t \t </div>
\t \t <div class="screen-print2">screen-print-two
\t \t </div>
\t </div>
\t <div class="store-container">
\t \t <div class="google">
\t \t \t <a href="path to app on play store">google</a>
\t \t </div>
\t \t <div class="apple">
\t \t \t <a href="path to app on apple store">apple</a>
\t \t </div>
\t \t <div class="web">
\t \t \t <a href="path to website">web</a>
\t \t </div>
\t </div>
\t <footer>
\t \t <div class="terms">
\t \t \t <a href="terms.html">Terms of Service</a>
\t \t </div>
\t \t <div class="contact">
\t \t \t <a href="mailto:[email protected]" target="_top">[email protected]</a>
\t \t </div>
\t </footer>
</body>如果任何人都可以與我怎麼能定位的項目幫助，我將不勝感激幫助。 （你可以看到我的主要問題是試圖定位screen-print-one & screen-print-two）。
感謝
太寬泛;這不應該涉及絕對或相對定位（至少不是大規模） - 請閱讀常見網格系統的工作原理。 – CBroe
我想你可以用不同的方式定義'position：relative'，檢查[here]（https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/） – Swellar
而@CBroe說，你並不需要用這些來達到目的。一些花車會把戲 – Swellar