Tell us what’s happening:
This challenge is confused me, where the section is can’t see clearly, and I don’t really know the absolute locks the element in place relative to its parent container.
what’s going on the absolute removes the element from the normal flow of the document.
And I just add border and height to the section and change the value of the right and top, and I understand the absolute.
**Your code so far**
<style>
#searchbar {
position: absolute;
top: 150px;
right: 50px;
}
section {
border: 10px solid blue;
height: 100px;
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36
Challenge: Lock an Element to its Parent with Absolute Positioning
Link to the challenge: