This article mainly shares with you an article on how to implement positioning in HTML. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to have a look.
1. The CSS positioning (Posotioning) attribute allows you to position the element. The position attribute value:
static (default value): The element box is generated normally. Block elements generate a rectangular box as part of the document flow/standard flow, while inline elements create one or more line boxes and place them in their parent elements
relative: the element box deviates from a certain position , the element still maintains its shape before being positioned, and the space it originally occupied is still retained. From this perspective, it seems that the changed element is still in the document flow/standard flow
Absolute: The element is completely removed from the document flow Removed and positioned relative to its containing quick. The containing block may be another element in the document or the initial containing block. The space originally occupied by the element in the normal document flow is closed, as if the element does not exist, and the element is positioned into a block-level box, regardless of what type of box it was originally in the normal flow
fixed: The performance of the element is similar to absolute. The difference is that the containing block is the window itself (body)
2. Introduction to relative
Elements using this attribute value will be relative to the original position The coordinates of the upper left corner are positioned using top and left
Code:
<style type="text/css">
#main{
width:800px;
height:400px;
margin:0 auto;
border:1px solid blue;
}
.p{
width:110px;
height:100px;
background:yellow;
margin-left:10px;
float:left;
}
</style>
</head>
<body>
<p id="main">
<p class="p">p1</p>
<p class="p">p2</p>
<p class="p">p3</p>
<p class="p">p4</p>
</p>
</body>Rendering:
(1) Modify the positioning value of p2 to relative, that is: add position: relative; top: 120px; left: 50px;
relative to the red dot position, right and downward respectively After moving 50 pixels and 120 pixels, the original position is still vacant. The left and top values can also be negative values. The difference is that they are moved in the opposite direction
Change the positioning of p2 to absolute That is: add position: absolute;top:120px;left:50px;
It can be seen that p2 is moved relative to the upper left corner of the body, and the original position is occupied, as if Its position is never the same. This is because p2 will look to the box below it to find the layer that is not in the standard flow. It will keep searching downward until it finds the position. If it cannot find it, it will take the body as the standard, and then it will Move relative to the upper left corner of this layer. Next, we can add positioning relative to the green frame to feel that
will be relative to the upper left corner of the green frame. Move
fixed: Add the positioning fixed attribute value to p2
Whether you add positioning relative or absolute to the parent element of p2, p2 has a total household registration Moved relative to the upper left corner of the body, and the previous position is already occupied.
Positioning is relatively simple compared to floating, I wish you all can gain something
The above is the detailed content of How to implement positioning in HTML. For more information, please follow other related articles on the PHP Chinese website!
H5中position属性的灵活运用技巧Dec 27, 2023 pm 01:05 PMH5中如何灵活运用position属性在H5开发中，经常会涉及到元素的定位和布局问题。这时候，CSS的position属性就会发挥作用。position属性可以控制元素在页面中的定位方式，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘附定位（sticky）。本文将详细介绍在H5开发中如何灵活运用position属性
web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！
html怎样把div放在底部Mar 02, 2021 pm 05:44 PMhtml把div放在底部的方法：1、使用position属性将div标签相对于浏览器窗口进行定位，语法“div{position:fixed;}”；2、设置到底部距离为0来把div永远放置于页面底部，语法“div{bottom:0;}”。
CSS 布局属性优化技巧：position sticky 和 flexboxOct 20, 2023 pm 03:15 PMCSS布局属性优化技巧：positionsticky和flexbox在网页开发中，布局是一个非常重要的方面。良好的布局结构可以提高用户体验，使页面更加美观和易于导航。而CSS布局属性则是实现这一目标的关键。在本文中，我将介绍两种常用的CSS布局属性优化技巧：positionsticky和flexbox，并提供具体的代码示例。一、positions
h5如何使用positionDec 26, 2023 pm 01:39 PM在H5中使用position属性可以通过CSS来控制元素的定位方式：1、相对定位relative，语法为“style="position: relative;”；2、绝对定位absolute，语法为“style="position: absolute;”；3、固定定位fixed，语法为“style="position: fixed;”等等。
position有哪些属性Oct 10, 2023 am 11:18 AMposition属性取值有static、relative、absolute、fixed和sticky等。详细介绍：1、static是position属性的默认值，表示元素按照正常的文档流进行布局，不进行特殊的定位，元素的位置由其在HTML文档中的先后顺序决定，无法通过top、right、bottom和left属性进行调整；2、relative是相对定位等等。
HTML5中画布标签是什么May 18, 2022 pm 04:55 PMHTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。
CSS 层叠属性解读：z-index 和 positionOct 20, 2023 pm 07:19 PMCSS层叠属性解读：z-index和position在CSS中，布局和样式的设计是非常重要的。而在设计中，经常需要对元素进行层叠和定位。两个重要的CSS属性，即z-index和position，可以帮助我们实现这些需求。本文将深入探讨这两个属性并提供具体的代码示例。一、z-index属性z-index属性用于定义元素在垂直方向上的堆叠顺序。元素的层叠
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 English version
Recommended: Win version, supports code prompts!
