Home Web Front-end CSS Tutorial Analysis of CSS3 positioning and floating

Analysis of CSS3 positioning and floating

Jun 20, 2018 pm 05:44 PM
css3 position float

This article mainly introduces the concepts of CSS3 positioning and floating in detail, as well as the example code to explain the use of CSS3 positioning and floating. Interested friends can refer to it

This article is shared with everyone The basic concepts and usage of CSS3 positioning and floating are for your reference. The specific content is as follows

1. Positioning

1. css positioning :

Change the position of the element on the page

2. css positioning mechanism:

Ordinary flow:

Floating:

Absolute layout:

3. CSS positioning attributes:

position puts the element in a static, relative, absolute, or fixed position
top/left/right/bottom offset of the element up/left/right/bottom
overflow sets the overflow of the element What happens in its area
clip sets the shape of the element display
vertical-align sets the alignment of the element display
z-index sets the stacking order of the element/is used to set the stacking order of the element, the larger the Attributes of the above/

position
static static (default)
relative relative layout (default)
absolute absolute layout (not related to other tags)
fixed Fixed (will not move with the scrolling of the page)

Example code:

<body>   
    <p id="position1"></p>   
    <p id="position2"></p>   
    <script>   
        for (var i=0;i<100;i++){   
            document.write(i+"<br/>")   
        }   
    </script>   
</body>   
#position1{   
    width: 100px;   
    height: 100px;   
    background-color: blue;   
    position: relative;   
    left: 20px;   
    top: 20px;   
    /*用来设置元素的堆叠顺序,越大越在上方*/
    z-index: 2;   
}#position2{   
    width: 100px;   
    height: 100px;   
    background-color: red;   
    position: relative;   
    left: 30px;   
    top: 10px;   
    z-index: 1;   
}
Copy after login

2. Floating

Values ​​available for the float attribute:
left/right/none/inherit: left or right, not floating, inherited from the parent.
* float

1. After floating, break away from the normal flow and arrange it in the floating flow. Any element is displayed as a block element, the width and height can be set, and the content expands the width.
2. When many floating blocks are together, they always find the nearest block with the same floating direction to determine their position. If they are forced to wrap, the height of the nearest element will be used as the basis for the new position. Line

clear attribute: Remove floating attributes (including inherited ones)
The meaning is the same as the corresponding one above

Situation where floating properties need to be cleared:

After the child label is floated, the height of the parent label cannot be expanded, so it needs to be cleared;
If the newly added label is not affected by the previously floating elements, it needs to be cleared;

1 .clear:both; height:0; overflow:hidden;
2.overflow:hidden; Trigger layout is often used to clear inner floats;
3.after pseudo-object: set
.aa:after for the current object {content:”.”}
.aa {display:inline-block;}
.aa {display:block;}
Find a way to trigger the layout rendering mechanism of ie6, and solved many bugs by luck. zoom: 1 can be triggered! ! !
inline-block is for internal blocks and external lines;
4. The parent tags float together;
5.position:absolute; clear the floats

display
display: block is displayed as a block element;
display: none, the content disappears and does not take up space;
display: inline is displayed as an inline element, which can solve the double BUG of IE6;
display: inline-block is for internal blocks and external lines.

visibility: none
Hide, but still takes up space and affects the layout

The above is the entire content of this article, I hope it will be useful to everyone Learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the method of clearing floating collapse in css

The above is the detailed content of Analysis of CSS3 positioning and floating. For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use map and location functions in uniapp How to use map and location functions in uniapp Oct 16, 2023 am 08:01 AM

How to use map and positioning functions in uniapp 1. Background introduction With the popularity of mobile applications and the rapid development of positioning technology, map and positioning functions have become an indispensable part of modern mobile applications. uniapp is a cross-platform application development framework developed based on Vue.js, which can facilitate developers to share code on multiple platforms. This article will introduce how to use maps and positioning functions in uniapp and provide specific code examples. 2. Use the uniapp-amap component to implement the map function

How to locate Apple wireless earphones if they are lost_How to locate Apple wireless earphones How to locate Apple wireless earphones if they are lost_How to locate Apple wireless earphones Mar 23, 2024 am 08:21 AM

1. First, we open the [Search] App on the mobile phone and select the device in the list on the device interface. 2. Then, you can check the location and click on the route to navigate there.

How to use a WordPress plugin to implement instant location functionality How to use a WordPress plugin to implement instant location functionality Sep 05, 2023 pm 04:51 PM

How to use WordPress plug-ins to achieve instant location functionality With the popularity of mobile devices, more and more websites are beginning to provide geolocation-based services. In WordPress websites, we can use plug-ins to implement instant positioning functions and provide visitors with services related to their geographical location. 1. Choose the right plug-in. There are many plug-ins that provide geolocation services in the WordPress plug-in library to choose from. Depending on the needs and requirements, choosing the right plug-in is the key to achieving instant positioning functionality. Here are a few

HTML, CSS and jQuery: Make a button with a floating effect HTML, CSS and jQuery: Make a button with a floating effect Oct 24, 2023 pm 12:09 PM

HTML, CSS and jQuery: Making a button with a floating effect requires specific code examples. Introduction: Nowadays, web design has become an art form. By using technologies such as HTML, CSS and JavaScript, we are able to add various aspects to the page. Such special effects and interactive effects. This article will briefly introduce how to use HTML, CSS and jQuery to create a button with a floating effect, and provide specific code examples. 1. HTML structure First, we need to

Methods to solve the problem of memory leak location in Go language development Methods to solve the problem of memory leak location in Go language development Jul 01, 2023 pm 12:33 PM

Methods to solve the problem of memory leak location in Go language development: Memory leak is one of the common problems in program development. In Go language development, due to the existence of its automatic garbage collection mechanism, memory leak problems may be less than other languages. However, when we face large and complex applications, memory leaks may still occur. This article will introduce some common methods to locate and solve memory leak problems in Go language development. First, we need to understand what a memory leak is. Simply put, a memory leak refers to the

How to implement lace borders in css3 How to implement lace borders in css3 Sep 16, 2022 pm 07:11 PM

In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".

How to locate the other party's mobile phone location on Amap - How to locate the other party's mobile phone location on Amap How to locate the other party's mobile phone location on Amap - How to locate the other party's mobile phone location on Amap Apr 01, 2024 pm 02:11 PM

1. Click to enter the Amap map software on your mobile phone. 2. Click My in the lower right corner. 3. Click to enter the family map. 4. Click Create My Family Map. 5. After the creation is successful, an invitation code will appear and can be shared with another mobile phone.

How to change the location information and how to modify the address How to change the location information and how to modify the address Mar 12, 2024 pm 09:52 PM

We all know very clearly that Taku APP is a very reliable chat and social platform. Now it allows everyone to make friends online. Some of the forms of making friends here mainly allow people to make friends by location. Oh, it's so simple and direct. After all, it can automatically locate your current location information for you, and better match you with some friends in the same city who are close to each other, so that everyone can chat more easily and feel special. Happy, many times, in order to get to know more friends in other places, everyone has the idea of ​​​​modifying their address, but they don’t know how to modify their location information, which is very difficult. troubled, so the editor of this site also collected some specific

See all articles