What does css fixed mean?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What does css fixed mean?

青灯夜游

May 13, 2021 pm 04:11 PM

cssfixed

fixed means "fixed" and is the attribute value of the css position attribute, which can make the element fixed, and the fixed element will not change its position as the scroll bar is dragged. In the field of view, the position of fixedly positioned "position:fixed" elements will not change.

What does css fixed mean?

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

What does css fixed mean?

#fixed is the attribute value of the position attribute. When the position attribute of an element is set to fixed, the element is fixed, and the fixed element will not change its position as the scroll bar is dragged. The position of fixedly positioned elements does not change within the field of view.

Fixed fixed positioning and absolute positioning are similar. They both allow elements to be displaced and separated from the document flow.

Grammar:

position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;

"position:fixed;" is used in conjunction with the four attributes top, bottom, left and right, among which "position:fixed;" makes the element a fixed position element, and then use the four attributes top, bottom, left, and right to set the position of the element relative to the browser.

Not all of the four attributes top, bottom, left and right are used. Note that the reference objects of these four values are the four edges of the browser.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			h2.pos_abs {
				position: fixed;
				left: 100px;
				top: 120px
			}
			p{
				height: 100px;
				background-color: palegoldenrod;
			}
			p.p2{
				margin-top:120px ;
			}
		</style>
	</head>

	<body style="height: 1200px;">
		<h2 id="这是带有固定定位的标题">这是带有固定定位的标题</h2>
		<p>相对于浏览器窗口来对元素进行定位</p>
		<p class="p2">相对于浏览器窗口来对元素进行定位</p>
	</body>

</html>

Rendering:

What does css fixed mean?

(Learning video sharing: css video tutorial )

The above is the detailed content of What does css fixed mean?. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

CSS: Can I use multiple IDs in the same DOM?May 14, 2025 am 12:20 AM

No,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure

The Aims of HTML5: Creating a More Powerful and Accessible WebMay 14, 2025 am 12:18 AM

HTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl

Significant Goals of HTML5: Enhancing Web Development and User ExperienceMay 14, 2025 am 12:18 AM

HTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur

HTML5: Is it secure?May 14, 2025 am 12:15 AM

HTML5isnotinherentlyinsecure,butitsfeaturescanleadtosecurityrisksifmisusedorimproperlyimplemented.1)Usethesandboxattributeiniframestocontrolembeddedcontentandpreventvulnerabilitieslikeclickjacking.2)AvoidstoringsensitivedatainWebStorageduetoitsaccess

HTML5 goals in comparison with older HTML versionsMay 14, 2025 am 12:14 AM

HTML5aimedtoenhancewebdevelopmentbyintroducingsemanticelements,nativemultimediasupport,improvedformelements,andofflinecapabilities,contrastingwiththelimitationsofHTML4andXHTML.1)Itintroducedsemantictagslike,,,improvingstructureandSEO.2)Nativeaudioand

CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AM

Using ID selectors is not inherently bad in CSS, but should be used with caution. 1) ID selector is suitable for unique elements or JavaScript hooks. 2) For general styles, class selectors should be used as they are more flexible and maintainable. By balancing the use of ID and class, a more robust and efficient CSS architecture can be implemented.

HTML5: Goals in 2024May 13, 2025 am 12:13 AM

HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur

What are the main areas where HTML5 tried to improve?May 13, 2025 am 12:12 AM

HTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr

See all articles