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

Interpretation of the module for load balancing using nginx

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

Interpretation of the module for load balancing using nginx

MySQL database migration quickly exports and imports large amounts of data

Comprehensive understanding of html.css overflow

Docker executes a command in a container outside the container

Detailed explanation of common commands in MySQL 8.0+

Detailed explanation of nginx forward proxy and reverse proxy

IIS and APACHE implement HTTP redirection to HTTPS

In-depth explanation of MySql table, database, sharding and partitioning knowledge

How to solve the problem of clicking tomcat9.exe crashing

Detailed explanation of MySQL transaction isolation level and MVCC

Recommend

Detailed explanation of computed properties in Vue

Some suggestions for ensuring MySQL data security

Two implementations of front-end routing from vue-router

Example of converting JavaScript flat array to tree structure

Detailed explanation of the reasons and solutions for Docker failing to start normally

Use of Linux ipcs command

Three methods of automatically completing commands in MySQL database

Detailed steps for running springboot project in Linux Docker

Four ways to switch tab pages in VUE

Example of JSON output in HTML format (test interface)

Summary of @ usage in CSS (with examples and explanations)

Detailed example of MySQL (5.6 and below) parsing JSON

How to install and use Ubuntu Docker

Detailed explanation and examples of database account password encryption

Vant uploader implements the drag-and-drop function for uploading pictures (set as cover)