A brief discussion on how to set CSS position absolute relative to the parent element

As we all know, the CSS position absolute is set according to the document by default. For example, if you set left:0 and top:0 after position:absolute, the element will be displayed in the upper left corner of the page.

Sometimes we need to set a relative absolute position within the container of the parent element

To achieve this, you need to set the position attribute of the parent element to relative. After setting it to relative, do not set the left and top attributes. At this time, although the parent element is relative, it still remains in the original position. Then set the position of the child element to absolute, and set its left, top, right, and bottom attributes, so that it is the absolute position relative to the parent element.

The following is the HTML sample code:

<!doctype html>
<html>
    <style type="text/css">
    #father {
       position: relative;
       width:600px;
       margin:auto;
       height:400px;
       border:1px solid red;
    }

    #son1 {
       position: absolute;
       top: 0;
       background:#f0f0f0;
    }

    #son2 {
       position: absolute;
       bottom: 0;
       background:blue;
    }
    </style>
    <body>
    <div id="father">
        <div id="son1">I am son1</div>
        <div id="son2">I am son2</div>
    </div>
    </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Create a screen recording function with JS

>>: Detailed explanation of transaction isolation levels in MySql study notes

Detailed description of HTML table border control

Detailed graphic tutorial on downloading and installing VirtualBox software and installing and deploying it in Linux environment

Blog

A brief discussion on how to set CSS position absolute relative to the parent element

Detailed description of HTML table border control

mysql8.0 forgotten password modification and net command service name invalid problem

Common symbols in Unicode

Implementing a table scrolling carousel effect through CSS animation

Analysis of the principles of Mysql dirty page flush and shrinking table space

Reasons and solutions for not being able to detect array changes in Vue2

Basic usage examples of Vue named slots

How to quickly build ELK based on Docker

nginx automatically generates configuration files in docker container

Detailed graphic tutorial on downloading and installing VirtualBox software and installing and deploying it in Linux environment

Recommend

How to use Flex layout to achieve scrolling of fixed content area in the head

Using puppeteer to implement webpage screenshot function on linux (centos)

Professional MySQL development design specifications and SQL writing specifications

Test and solution for MySQL's large memory usage and high CPU usage

I have sorted out some domestic design websites that I think are good.

Illustration of the process of using FileZilla to connect to the FTP server

js implements a simple English-Chinese dictionary

Vue+node realizes audio recording and playback function

DIV background semi-transparent text non-translucent style

js to achieve simple product screening function

VMware vSphere 6.7 (ESXI 6.7) graphic installation steps

About the pitfalls of implementing specified encoding in MySQL

Implementing search box function with search icon based on html css

In html table, set different colors and widths for each cell

MySQL installation diagram summary