css 绝对定位和相对定位

css 绝对定位和相对定位绝对定位绝对定位指的是通过规定 HTML 元素在水平和垂直方向上的位置来固定元素 基于绝对定位的元素不占据空间 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素 如果当前需要被定位的元素没有已定位的祖先元素做参考值 则相对于整个网页 实例 1 DOCTYPE tml htmllang en head amp l head htmllang en

绝对定位

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不占据空间。

绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值,则相对于整个网页。

 实例1:

 
   
   元素定位实例 
    
   

css绝对定位的应用


该段落是相对于页面定位,距离页面的顶部100像素,距离左边0像素

我是相对于页面定位的div元素,距离顶端80像素,距离左边180像素

该段落是相对于父元素div定位的,距离div元素的顶端100像素,距离div元素的左边0像素

 页面效果:

css 绝对定位和相对定位

 本实例包含两个样式完全相同的段落元素

,用于对比测试直接在页面中使用和嵌入已定位的

元素中两种情况。

 

 

相对定位 

相对定位与绝对定位的区别在于它的参照点不是左上角的原点,而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置,也仍然从原始的起点处占据空间。

实例2:

 
   
   元素定位实例 
    
   

css相对定位的应用


正常段落的状态

相对自己的正常位置向左偏移了50像素

相对自己的正常位置向右偏移了130像素

页面效果:

 css 绝对定位和相对定位

本实例包含了三个样式相同的段落元素

,用于对比测试相对定位的效果,并声明了一个带有实线边框效果的

元素包含这三个段落元素,以便对比段落元素的偏移量。 

 

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/228526.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月16日 下午6:49
下一篇 2026年3月16日 下午6:49


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号