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!
@keyframes vs CSS Transitions: What is the difference?May 14, 2025 am 12:01 AM@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.
Using Pages CMS for Static Site Content ManagementMay 13, 2025 am 09:24 AMI know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole &
The Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AMLinking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.
CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AMChoosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.
How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AMThe best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.
Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AMYes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AMWhat does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AMCSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For
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
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Chinese version
Chinese version, very easy to use
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
Atom editor mac version download
The most popular open source editor
