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

MySQL 8.0.12 decompression version installation tutorial personal test!

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

MySQL 8.0.12 decompression version installation tutorial personal test!

How to modify the "Browse" button of the html form to upload files

js to implement verification code interference (static)

JavaScript to achieve all or reverse selection function

Detailed explanation of Linux using ss command combined with zabbix to monitor socket

MySQL trigger definition and usage simple example

Graphical explanation of the underlying principle of JavaScript scope chain

Solution to nginx not jumping to the upstream address

Example of disabling browser cache configuration in Vue project

Tutorial on deploying springboot package in linux environment using docker

Recommend

How to implement web stress testing through Apache Bench

Summary of common problems in downloading and installing MySQL 5.7 on Win7 64-bit

MySQL 8.0.17 installation and simple configuration tutorial under macOS

Vue.js manages the encapsulation of background table components

Detailed graphic tutorial on how to enable remote secure access with Docker

A brief analysis of SQL examples for finding uncommitted transactions in MySQL

Summary of 6 Linux log viewing methods

MySql8 WITH RECURSIVE recursive query parent-child collection method

A practical record of handling the ddgs and qW3xT.2 mining viruses implanted in Linux servers

Use of MySQL query rewrite plugin

Build a server virtual machine in VMware Workstation Pro (graphic tutorial)

View the frequently used SQL statements in MySQL (detailed explanation)

Example of how to optimize MySQL insert performance

Node.js+express message board function implementation example

Use pictures to realize personalized underline of hyperlinks