css如何定位元素,html css定位
在页面上定位内容时，可以使用一些属性来帮助操作元素的位置。本文将展示一些使用CSSposition属性来包含不同定位元素类型的例子。若要在元素上使用定位，必须首先声明其positionproperty，该属性指定用于该元素的定位方法的类型。使用position属性值，并使用top、bottom、left和right属性来定位元素。它们的工作方式不同，这取决于它们的位置值。
定位值有五种类型：
静态相对固定绝对粘性
静止的
HTML元素默认静态定位，元素按照文档正常流程定位；静态定位元素不受顶部、底部、左侧和右侧属性的影响。带位置的元素：静态；没有任何特别的定位。
用于将位置设置为静态的CSS是：
位置：静态；下面是一个使用静态位置值的示例：
！DOCTYPE htmlhtmlheadstylebody { color:WHITE；字体：Helvetica；宽度：420px}.方形设置。方形{ border-radius:15px；}.方形集{背景：深灰色；}.方形{位置：静态；背景：绿色；高度：70px行高：40px文本对齐：居中；宽度：90px}/style/headbody div class= SQUARE-set figure class= SQUARE SQUARE-1 SQUARE 1/figure figure class= SQUARE SQUARE-2 SQUARE 2/figure figure class= SQUARE SQUARE-3 SQUARE 3/figure figure class= SQUARE SQUARE-4 SQUARE 4/figure/div/body/html
相对的
根据文档的正常流向，相对于其正常位置定位元素，然后根据top、right、bottom和left的值相对于其自身偏移。偏移量不影响任何其他元素的位置；因此，为页面布局中的元素指定的空间和位置在静态上是相同的。设置相对定位元素的top、right、bottom和left属性将导致其偏离正常位置。不会调整其他内容来容纳元素留下的任何间隙。
用于将位置设置为相对的CSS是：
位置：相对；以下示例使用相对位置值：
！DOCTYPE htmlhtmlheadstylebody { color:white；字体：Helvetica；宽度：420px}.方形设置。方形{ border-radius:15px；}.方形集{背景：深灰色；}.正方形{背景：绿色；高度：70px行高：40px位置：相对；文本对齐：居中；宽度：80px}.square-1 { top:15px；}.square-2 { left:50px；}.square-3 { bottom:-23px；右：30px}/style/headbody div class= SQUARE-set figure class= SQUARE SQUARE-1 SQUARE 1/figure figure class= SQUARE SQUARE-2 SQUARE 2/figure figure class= SQUARE SQUARE-3 SQUARE 3/figure figure class= SQUARE SQUARE-4 SQUARE 4/figure/div/body/html
绝对
此元素将从正常文档流中删除，并且在页面布局中，不会为此元素创建任何空间。该元素相对于最近的定位祖先(如果有)定位；否则，它相对于初始包含块放置，其最终位置由top、right、bottom和left的值决定。
用于将位置设置为绝对位置的CSS是：
位置：绝对；一个元素位置：绝对；相对于最近的祖先定位。如果一个绝对定位的元素没有定位的祖先，它使用文档的主体并随着页面滚动而移动。定位元件的位置不是静态的。
下一个例子强调了元素的绝对位置：
！DOCTYPE htmlhtmlheadstyle . square-set { color:WHITE；背景：深灰色；高度：200px位置：相对；边框半径：15px字体：Helvetica；宽度：420px}.正方形{背景：绿色；高度：80px位置：绝对；宽度：80px边框半径：15px行高：60px}.square-1 { top:10%；左：6%；}.square-2 { top:5；右：-20px；}.square-3 { bottom:-15px；右：40px}.平方-4 {底部：0；}/style/headbody div class= SQUARE-set figure class= SQUARE SQUARE-1 SQUARE 1/figure figure class= SQUARE SQUARE-2 SQUARE 2/figure figure class= SQUARE SQUARE-3 SQUARE 3/figure figure class= SQUARE SQUARE-4 SQUARE 4/figure/div/body/html
固定的
从正常文档流中删除元素，并且在页面布局中，没有为元素创建空间。该元素相对于由视口建立的初始包含块定位，其最终位置由值top、right、bottom和left确定。这个值总是创建一个新的堆栈上下文。
用于将位置设置为固定的CSS如下：
位置：固定；元素位置：固定；相对于视口定位，这意味着即使页面滚动，它也总是停留在同一位置。顶部、右侧、底部和左侧属性用于定位元素。
黏
元素根据文档的正常流程定位，然后根据top、right、bottom和left的值相对于其最近的升序块级别偏移，包括与表格相关的元素。偏移不会影响任何其他元素的位置。
这个值总是创建一个新的堆栈上下文。请注意，sticky元素使用“滚动机制”来“粘”到其最近的祖先，即使该祖先不是最近的实际滚动祖先。
用于将位置设置为sticky的CSS是：
位置：粘性；元素位置：粘性；的定位是基于用户的滚动位置，并根据滚动位置在相对和固定的位置之间切换。
重叠元素
网页上的重叠元素对于突出、宣传和关注我们网页上的重要内容非常有用。让元素覆盖你的网站是一个非常有用和有价值的功能设计实践。当定位元素时，它们可以与其他元素重叠，因此要指定顺序(哪些元素应该放在其他元素之前或之后)，我们应该使用z-index属性。堆栈顺序较大的元素总是位于堆栈顺序较低的元素之前。请注意，z-index属性仅适用于定位元素(位置：绝对、位置：相对或位置：固定)。
下一个示例显示了z-index属性在不同方块上的工作方式：
！DOCTYPE htmlhtmlheadstyle . square-set { color:white；背景：紫色；高度：170px位置：相对；边框半径：15px字体：Helvetica；宽度：400px}.正方形{背景：橙色；边框：4px实心一枝黄花；位置：绝对；边框半径：15px高度：80px宽度：80px}.square-1 { position:相对；z指数：1；边框：虚线；身高：8em边距-底部：1em页边距-顶部：2em}.square-2 {位置：绝对；z指数：2；背景：黑色；宽度：65%；左：60pxtop:3em；}.square-3 {位置：绝对；z指数：3；背景：浅绿色；宽度：20%；左：65%；顶：-25px；身高：7em不透明度：0.9；}/style/headbody div class= SQUARE-set figure class= SQUARE SQUARE-1 SQUARE 1/figure figure class= SQUARE SQUARE-2 SQUARE 2/figure figure class= SQUARE SQUARE-3 SQUARE 3/figure/div/body/html
在图像上定位文本
以下示例使用上述CSS定位值在图像上覆盖一些文本：
！DOCTYPE htmlhtmlheadstyle . module { background:linear-gradient { rgba(0，4，5，0.6)，rgba(2，0，3，0.6))，URL(http://www . holtz . org/Library/Images/slide shows/Gallery/Landscapes/43098-DSC _ 64xx _ landscape-kel tern-1 _ wall . jpg)；背景-尺寸：封面；宽度：600px高度：400px边距：10px 0 0 10px位置：相对；浮动：左；}.mid H3 { font-family:Helvetica；字体粗细：900；颜色：白色；文本转换：大写；边距：0；位置：绝对；top:30%；左：50%；font-size:3r em；transform: translate(-50%，-50%)；}/style/headbody div class= module mid H3野性/h3/div/body/html
结论
在本文中，我们描述并给出了CSS定位类型的例子，并描述了如何在图像上重叠元素和添加一些文本。
关于用CSS定位HTML元素的实现方法这篇文章到此为止。有关用CSS定位HTML元素的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。