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

What does css fixed mean?

青灯夜游

Release： 2021-11-19 17:57:01

Original

5341 people have browsed it

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:像素值;

Copy after login

"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 class="pos_abs">这是带有固定定位的标题</h2>
		<p>相对于浏览器窗口来对元素进行定位</p>
		<p class="p2">相对于浏览器窗口来对元素进行定位</p>
	</body>

</html>

Copy after login

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!