html中设置锚点定位的几种常见方法

2024-07-07 14:14:34 浏览

绝对定位(absolute):  当一个DIV块的位置被定义为绝对定位的时候,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是零,那么它将漂浮在原来的位置上。否则就会以浏览器的上下左右四边为基准进行偏移。  相对定位(relative):  当设了相对的偏移量之后,这个DIV原来所占据的位置(文档流)不会被下面的DIV块挤占,而是空在那里;当偏移后向下或者向右的内容会被隐藏,而 这一点区别于绝对定位,绝对定位会出现滚动条。但是向左或者向右的内容超出当前浏览器的视线,无论是相对还是觉得定位,超出的部分都会被隐藏。

html中设置锚点定位的几种常见方法

定位框是一种CSS中的属性,用来定义HTML元素的位置和大小。 具体使用方法为在CSS中选择需要控制位置的HTML元素,使用position属性进行定义,常见的取值为relative、absolute和fixed。然后再使用top、bottom、left、right等属性设置位置偏移量或者width、height等属性控制大小。在需要调整重叠元素的顺序时,还可使用z-index属性进行层叠控制。 定位框可以方便地实现网页布局和效果的调整,但过度使用可能导致页面过于混乱,影响用户体验,需要慎重使用。

html布局的常见类型有哪些?html中的布局方式有三种:流动布局、浮动布局以及层模型,html的这三种布局各有个的特点,本篇文章就给大家简单说说html的三种布局方式的特点。

1、流动布局(html网页默认的布局方式)

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。

2、内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

特点:默认布局下,块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示。就需要使用float来实现。

特点:如果我想一个div在另外一个div的上面,我们就需要可以使用绝对定位来完成,层模型的三种定位方式relative、absolute、fixed

需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,

然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),

它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。

相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),

然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

fixed:表示固定定位,与absolute定位类型类似,

但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。

由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,

除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,

因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,

本文版权声明本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请联系本站客服,一经查实,本站将立刻删除。