Introduction to CSS3 positioning and floating
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;
}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:
Analysis of CSS floating float and positioning
Use css3 to set a list without upper and lower edges How to space lines
The above is the detailed content of Introduction to CSS3 positioning and floating. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1672
14
1428
52
1332
25
1277
29
1257
24
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 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
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.
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
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;".
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 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.
iPhone typing 'Oil found' triggers location? Can privacy still be guaranteed?
Apr 26, 2024 pm 01:28 PM
Recently, many users on the Internet said that when using Apple phones to search or comment on topics related to "discovering oil," the device will automatically turn on positioning. It is suspected that Apple phones are collecting and sending location information to monitor users. Will typing "Oil found" on iPhone trigger location? Can Apple's privacy be guaranteed in this way? Obviously, this is a misunderstanding! Apple customer service said that the positioning function is turned on by default, and any operation may trigger status updates, rather than being limited to sending specific text. But this statement is not entirely comprehensive. Generally, the iPhone rarely triggers the positioning function, unless you are searching for something, or the APP mechanism setting is related. When the user enters certain characters, the APP will automatically enable the positioning function in the background. Why can this topic
