In project development, we often use the position: fixed attribute, which is often applied when the navigation bar is fixed to the top when the scroll bar is pulled down, and the advertisement is fixed on both sides of the page or in the middle of the browser. When we use the position: fixed positioning attribute, it generates absolute positioning elements, which are positioned relative to the browser window, so we only need to define top, The bottom, left, and right attributes are OK, but how do we implement parent positioning. To achieve considerable
We often use it in project development position:fixed Property. It is often used to fix the navigation bar to the top when the scroll bar is pulled down, and to fix advertisements on both sides of the page or browser middle. When we use position: Fixed positioning Property, it generates Absolute positioning The element of is positioned relative to the browser window, so you only need to define top, The bottom, left, and right attributes are OK, but how do we implement parent positioning.
To achieve the equivalent of parent element positioning, you can do the following:
Do not set the top of the fixed element, bottom，left，right， Only set the margin to realize its offset position. In essence, the fixed element is equivalent to the window positioning, and the implementation effect is relative to the parent element positioning.
The codes are as follows:
<! DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>How position: fixed can be positioned relative to the parent in css</title> <style> body{ margin: 60px;} .parent{ width: 200px; height: 300px; background: #66a2ff; position: relative; } .child{ position: fixed; width: 100px; height: 300px; background: #ffd266; margin-left: 210px;/* Left offset of parent 210px*/ } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
Statement: Some of the resources on this site are original works on the site, and some are publicly shared and collated based on the Internet. The copyright belongs to the original author.
If it infringes your rights, please contact our website, and we will deal with it as soon as possible. Thank you. Please indicate the source of the transfer
Link to this article: https://www.umtheme.com/web/220.html
