How to make a div float over another div with css

WBOY
Release: 2021-11-15 14:54:13
Original
22523 people have browsed it

How to make a div float on another div: 1. Add the "position:absolute" absolute positioning style to the two div elements; 2. Add "{top: distance from the top of the page" to one of the div elements. ;left: Distance from the left side of the page;}" style to float it on another div element.

How to make a div float over another div with css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to use css to suspend a div on another div

1. Create a new html file named test.html for Explain how to use css div to make a div float on another layer of div. In the test.html file, create two divs, called "First Layer" and "Second Layer". Set the class attributes for the two divs, "aa" and "bb" respectively, which are mainly used to set the CSS styles of the two divs below.

How to make a div float over another div with css

2. In the css tag of the test.html file, use css to initialize the inner and outer margins of all elements on the page and set them to 0. Within the css tag, set the style of the div with the class name aa. Set its width to 200px, height to 200px, position attribute to absolute positioning, and background color to red.

In the css tag, set the style of the div with the class name bb. Set its width to 200px, height to 200px, position attribute to absolute positioning, distance to the left edge of the page to 50px, distance to the top edge of the page to 50px, and background color to yellow.

How to make a div float over another div with css

3. Open the test.html page in the browser and check the effect of letting the div float on another layer of div.

How to make a div float over another div with css

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to make a div float over another div with css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!