-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