Computer scienceFrontendCSSBasic propertiesPositioning

Position

Theory

Fixed menu

Report a typo

You are developing your site and have already started writing a header. You want to detach the header from the page so that the user keeps seeing the title the whole time when browsing the site. You also want to lock the menu in place so that it doesn't scroll anywhere. Here is how you supposedly envision it:

Fixed heading menu

Write HTML and CSS code
<header class="header">
<div class="container">
<h1 class="head_title">my first site</h1>
<button class="menu">Menu</button>
</div>
</header>
<main>
<div class="container">
<article class="article">
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, alias! Amet soluta assumenda deleniti pariatur quam officia dignissimos quos veniam quas nihil, tempore fugit vero sunt consequatur suscipit eveniet? Ut ipsa animi voluptate sint, natus harum ea placeat saepe aliquam.</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, doloremque at molestias repudiandae quam error neque repellat dolor maiores, autem debitis? Debitis, assumenda. Minus nihil vero quis magni rerum quibusdam?</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, deserunt?</p>
<p class="news">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam voluptatem in ratione nihil voluptates facilis accusantium quis dicta sint?</p>
<p class="news">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nihil nesciunt odit optio cum, soluta architecto. Voluptate dicta totam nulla voluptatem ducimus similique quisquam ab impedit, magnam modi, ipsam molestiae.</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, alias! Amet soluta assumenda deleniti pariatur quam officia dignissimos quos veniam quas nihil, tempore fugit vero sunt consequatur suscipit eveniet? Ut ipsa animi voluptate sint, natus harum ea placeat saepe aliquam.</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, doloremque at molestias repudiandae quam error neque repellat dolor maiores, autem debitis? Debitis, assumenda. Minus nihil vero quis magni rerum quibusdam?</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, deserunt?</p>
<p class="news">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam voluptatem in ratione nihil voluptates facilis accusantium quis dicta sint?</p>
<p class="news">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nihil nesciunt odit optio cum, soluta architecto. Voluptate dicta totam nulla voluptatem ducimus similique quisquam ab impedit, magnam modi, ipsam molestiae.</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, alias! Amet soluta assumenda deleniti pariatur quam officia dignissimos quos veniam quas nihil, tempore fugit vero sunt consequatur suscipit eveniet? Ut ipsa animi voluptate sint, natus harum ea placeat saepe aliquam.</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, doloremque at molestias repudiandae quam error neque repellat dolor maiores, autem debitis? Debitis, assumenda. Minus nihil vero quis magni rerum quibusdam?</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, deserunt?</p>
<p class="news">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam voluptatem in ratione nihil voluptates facilis accusantium quis dicta sint?</p>
<p class="news">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nihil nesciunt odit optio cum, soluta architecto. Voluptate dicta totam nulla voluptatem ducimus similique quisquam ab impedit, magnam modi, ipsam molestiae.</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, alias! Amet soluta assumenda deleniti pariatur quam officia dignissimos quos veniam quas nihil, tempore fugit vero sunt consequatur suscipit eveniet? Ut ipsa animi voluptate sint, natus harum ea placeat saepe aliquam.</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, doloremque at molestias repudiandae quam error neque repellat dolor maiores, autem debitis? Debitis, assumenda. Minus nihil vero quis magni rerum quibusdam?</p>
<p class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, deserunt?</p>
<p class="news">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam voluptatem in ratione nihil voluptates facilis accusantium quis dicta sint?</p>
<p class="news">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nihil nesciunt odit optio cum, soluta architecto. Voluptate dicta totam nulla voluptatem ducimus similique quisquam ab impedit, magnam modi, ipsam molestiae.</p>
</article>
<aside class="aside">
<p class="tags">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias, quia.</p>
<p class="tags">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias, quia.</p>
<p class="tags">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias, quia.</p>
<p class="tags">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias, quia.</p>
</aside>
Completed 1 of 2
Specify the positioning type for the .header element based on the job condition.
The code is valid
___

Create a free account to access the full topic