自定义定位

Question

代表我想做的事

我一直在尝试将箭头定位在视口的底部并将内容放在它下面...问题是箭头和内容都存在于同一个父元素中，我不确定我是否做得很好...在网站建设方面我是一个初学者，我一直在这个问题上摸不着头脑。

下面是 HTML 和 CSS 代码：

<div class="continut">

      <img src="img secundare\sageata-jos-n.png" alt="sageata in jos" id="sageata-jos">

      <!-- Buton dark mode -->

      <div class="theme-switch-wrapper">

        <p>Mod intunecat</p>

       <label class="theme-switch" for="checkbox">

         <input type="checkbox" id="checkbox" />

         <div class="slider round"></div>

       </label>

     </div>

      <p>Rusia (în rusă Росси́я, transliterat: Rossia; pronunție rusă: /rɐˈsʲijə/), oficial Federația Rusă (în rusă Росси́йская Федера́ция, transliterat: Rossiiskaia Federația, pronunțat /rɐˈsʲijskəjə fʲɪdʲɪˈratsɨjə/), este o țară în Eurasia. Cu 17.125.200 km², Rusia este cea mai întinsă țară din lume, acoperind peste o optime din suprafața locuită a Pământului, și a noua ca populație, cu peste 144 de milioane de oameni în decembrie 2017, excluzând Crimeea. Aproximativ 77% din populație trăiește în partea vestică, europeană, a țării. Capitala Rusiei, Moscova, este unul dintre cele mai mari orașe din lume⁠; alte mari orașe⁠ sunt Sankt Petersburg, Novosibirsk, Ekaterinburg și Nijni Novgorod.</p>

    </div>

div.continut{

  background-color: var(--bg-color);

  color: var(--font-color);

  font-size: 20px;

  padding: 20px 10% 50px 10%;

  position: sticky;

  top: 0px;

  margin: 0;

  height: 100%;

  width: auto;

  text-align: left;

}

这些变量用于深色/浅色主题切换器，如果您想知道的话，语言是罗马尼亚语。我不关心类名或 id

到目前为止，我所做的就是仅针对特定的屏幕分辨率正确定位箭头和内容......

Answer 1

&nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hero-image {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 90vh;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hero-image img {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; object-fit: cover&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .arrow-down {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: -8%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateX(-50%)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .content{padding: 100px}&nbsp;<div class="continut">&nbsp; &nbsp; &nbsp; &nbsp; <div class="hero-image">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="http://razu.me/stackO/bg.jpg" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="arrow-down">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="http://razu.me/stackO/arrow-down.png" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Heading Text</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab qui, iste perspiciatis natus quam dolores non adipisci, nobis pariatur cupiditate vitae consequatur accusamus illum ipsum, amet aspernatur consectetur? Adipisci repellat ipsam placeat porro soluta ea corporis, veritatis officiis facere illo voluptas, sunt quis tenetur minima repellendus quia. Explicabo commodi voluptates dicta consectetur, sequi ipsam atque, officiis eaque nulla deleniti possimus quaerat eligendi laudantium libero! Libero expedita quidem atque eius veniam, delectus nobis perferendis, placeat itaque sapiente aperiam repellendus! Quaerat atque eveniet expedita culpa, maxime incidunt quis nostrum harum fugit, iusto praesentium, rem unde deleniti dicta beatae eos maiores eligendi nisi.</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>