CSS positioning has four modes: static, relative, absolute, fixed. The other static is the default value. The following will explain their respective characteristics;
static: static positioning, in In the dynamic layout flow, the elements in the page are automatically arranged and laid out according to the order and parent-child relationship. Each statically positioned element occupies a space of the dynamic layout;
relative: relative positioning, in the dynamic layout flow , if the offset (the value of LEFT or TOP) is set, there will be corresponding position adjustment. The standard of position adjustment is based on the previous element in the dynamic layout flow (ie: set to static and relative elements);
absolute: Absolute positioning, not in the dynamic layout flow. The existence of the element will be ignored in the dynamic layout flow (that is, the space occupied by this type of element will not be calculated, and it will default to the upper layer of ordinary elements with no Z-INDEX set) ), if the offset (the value of LEFT or TOP) is set, there will be corresponding position adjustment. The standard for position adjustment is based on the non-statically positioned parent element (or the element wrapped by non-static positioning). If there is no For parent elements that meet the conditions, BODY is used as the standard; if the offset is not set, the current position of the element is directly set to the default offset. In addition, absolute positioning has wrapping properties, that is, after the block-level element is absolutely positioned , unless the width and height of the element are explicitly set, the default width and height of the element are automatically adapted to the content of the element;
fixed: fixed positioning, not in the dynamic layout flow, in the dynamic layout flow The existence of this element will be ignored (that is, the space occupied by this type of element will not be calculated, and it will default to the upper level of ordinary elements without Z-INDEX set). If the offset (the value of LEFT or TOP) is set, there will be Corresponding position adjustment, the standard of position adjustment is based on the browser window (can be understood as BODY). If the offset is not set, the current position of the element will be directly set to the default offset. In addition, fixed positioning has wrapping property, that is, after a block-level element is fixedly positioned, unless the width and height of the element are explicitly set, the default width and height of the element are automatically adapted to the content of the element; and if the set or default bit offset If it is larger than the browser window, it will not be displayed;
The following is the demonstration code for the above four positioning methods:
<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>CSS Study</title> <style type="text/css"> html, body { margin:0px; padding:0px; height:100%; } #div0{ position:static; background-color:gray; height:200px; } #div1 { position:relative; background-color:green; height:200px; } #div2 { position: absolute; height: 50px; background-color: red; top: 20px; left: 50px; z-index: 9999; } #div3{ position:fixed; background-color:yellow; } </style> <script type="text/javascript"> window.onload = function () { alertpostion("div2"); alertpostion("div3"); } function alertpostion(divid) { var odiv = document.getElementById(divid); var top = odiv.offsetTop; var left = odiv.offsetLeft; alert("top:" + top +",left:" + left); } </script></head><body> <div id="div0"> div0 content position:static; </div> <div id="div1"> div1 content position:relative; <div id="div2"> div2 content position: absolute; </div> </div> <div id="div3"> div3 content position:fixed; </div></body></html>The final display effect is as follows:
After understanding the principles and functions of various CSS positioning, we can use CSS positioning to implement common page layouts
The first one: left and right layout, left fixed Size, width on the right side is adaptive, the code is as follows:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>CSS Study</title> <style type="text/css"> html, body { margin: 0px; padding: 0px; height: 100%; } #warper{ margin:0px; padding:0px; height:100%; background-color:skyblue; } #sidebar{ position:absolute; top:0px; width:200px; height:100%; background-color:green; } #content{ position:relative; left:200px; height:100%; background-color:orange; } </style></head><body> <div id="warper"> <div id="content"> content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent </div> <div id="sidebar"> sidebar </div> </div></body></html>The effect is as shown below:
After reading the code, you may If you are confused, why should you place the content on the left instead of the right? The reason is that the content needs to maintain an adaptive width, that is: 100%, then it must occupy the entire line of space. The only way is to use relative positioning, and then move the left offset The shift amount is set to the position that needs to be vacated, that is: 200PX; in this way, the non-left 200PX position is achieved, and the rest is the content area; the sidebar must be set to absolute positioning, because it does not use floating It is impossible to set the position. Set its left offset to 0PX and its width to 200PX; this will locate the area vacated by the content on the left, thus achieving the left and right layout of the entire page.
The second type: left and right layout, the width on the left is adaptive and the right is fixed. The code is as follows:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>CSS Study</title> <style type="text/css"> html, body { margin: 0px; padding: 0px; height: 100%; } #warper{ margin:0px; padding:0px; height:100%; background-color:skyblue; } #content { float:left; height: 100%; width:100%; margin-right:-200px; background-color: orange; } #content-inner{ height:100%; margin-right:200px; background-color:red; overflow:auto; } #sidebar { float: left; top: 0px; width: 200px; height: 100%; background-color: green; } </style></head><body> <div id="warper"> <div id="content"> <div id="content-inner"> content </div> </div> <div id="sidebar"> sidebar </div> </div></body></html>The effect is as shown in the figure below:
Implementation principle description: First float the content element to the left. Since floating also has wrapping properties, the display width must be set to 100%, but a sidebar needs to be placed on the right, so set the margin to - 200PX, allowing subsequent elements (ie: sidebar) to enter the space 200PX to the right of the content element. Then set the sidebar element to float to the left, and set the width to 200PX, so that it can be positioned to the right of the content element. Due to the content The right side of the element is occupied by the sidebar element for 200PX, so add a content-inner element to the content element and set its right margin to 200PX, leaving 200PX on the right side empty, thus avoiding being covered by the sidebar element. Form the overall left and right layout of the web page.
The third type: left, middle and right layout, with fixed width on the left and right, and adaptive width in the middle. The code is as follows:
<!DOCTYPE html><html><head><meta charset="utf-8"/> <title></title> <style type="text/css"> html,body{ height:100%; margin:0px; padding:0px; } #warper { position:relative; height:100%; } #left { position: absolute; top: 0px; left: 0px; height: 100%; width: 200px; background-color: red; } #right { position: absolute; top:0px; right: 0px; width: 200px; height: 100%; background-color: green; } #content{ margin:0px 200px 0px 200px; height:100%; background-color:orange; } </style></head><body> <div id="warper"> <div id="left"> left </div> <div id="content"> content </div> <div id="right"> right </div> </div></body></html>The implementation effect is as shown below:
Implementation principle description: First, set the warper element to relative positioning to ensure that the three wrapped DIV elements are uniformly based on the warper element when positioning, and then align the left element with the right element Set the fixed positioning and width to 200PX respectively (the width can be set according to the actual situation), and set the bit offset of the left element to LEFT=0, TOP=0 (of course, you don’t need to display the settings, because this is the default) , set the bit offset of the right element to RIGHT=0 to fix it to the right, TOP=0 to make it parallel to the top of the warper element, and finally just set the left and right margins of the content element to: 200PX; to make it left and right Give up 200PX space on both sides, finally forming a left, middle and right layout;
第四种布局：上中下布局，上面与下面固定高度及固定位置，中间自适应高度，代码如下：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html, body { margin: 0px; padding: 0px; height: 100%; } #warper { position:relative; margin: 0px; padding: 0px; height: 100%; } #header{ position:fixed; top:0px; height:50px; width:100%; background-color:yellowgreen; } #footer { position: fixed; height: 50px; bottom:0px; width: 100%; background-color:aqua; } #content{ margin:50px 0px 50px 0px; background-color:red; } </style></head><body> <div id="warper"> <div id="header">header</div> <div id="content">content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> content <br />content <br />content <br />content <br />content <br />content <br /> end </div> <div id="footer">footer</div> </div></body></html>实现效果如下图示：
实现原理说明：首先将header元素与footer元素分别设为固定定位，并指定高度及宽度（此处高度均设为50，宽度设为100%[注意包裹性]，可依实际情况设置），由于固定定位的位置调整是依据浏览器窗口的，所以只需将header元素TOP属性设为0，它就会始终在浏览器顶部，将footer元素BOTTOM属性设为0，它就始终在浏览器底部，最后将content元素的上下外边距设为50PX即可，这样就形成了上中下布局，当然中间content元素的高度并不是占据剩余空间，而是自适应内容的，如果设定固定高度多余的内容是无法显示的，所以这里应该考虑实际情况；
好了就总结到这里了，其实实现布局的方法有很多，我这里只是列举一些常用的比较简单的方法，关键是大家要知道CSS定位的原理，这样就能灵活应变了，不足之处，还请大家指出，谢谢！
SQL statement to backup database
Several ways to capture data
How to solve errorreport
Complete collection of SQL query statements
What is the difference between a router and a cat?
ubound function usage
How to set font in css
What is the reason why the computer screen is black but the computer is on?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
