剖析CSS relative相对定位用法

el/2024/7/17 22:31:52

本文向大家介绍一下CSS relative相对定位的概念,如果对一个元素进行相对定位,它将出现在它所在的位置上。

CSS relative相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

CSS 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。

 
  1. #box_relative {  
  2.   position: relative;  
  3.   left: 30px;  
  4.   top: 20px;  
  5. }  
  6.  

如下图所示:

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

CSS 相对定位实例

 
  1. <html>   
  2. <head>   
  3. <style type="text/CSS">   
  4. h2.pos_left  {  position:relative;  left:-20px  }    
  5. h2.pos_right  {  position:relative;  left:20px  }   
  6. </style> </head>    
  7. <body> <h2>这是位于正常位置的标题</h2>   
  8. <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>   
  9. <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>   
  10. <p>相对定位会按照元素的原始位置对该元素进行移动。</p>   
  11. <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。  
  12. </p>   
  13. <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。  
  14. </p>   
  15. </body>    
  16. </html>   

http://www.ngui.cc/el/5557215.html

相关文章

CSS 绝对定位属性absolute用法初探

CSS 绝对定位的用法你是否熟悉&#xff0c;这里和大家分享一下CSS 绝对定位的属性absolute&#xff0c;希望对你的学习有所帮助。 CSS absolute属性 设置为绝对定位的元素框从文档流完全删除&#xff0c;并相对于其包含块定位&#xff0c;包含块可能是文档中的另一个元素或者是…

CSS3属性之text-shadow和box-shadow(立体效果的实现)

语法&#xff1a; text-shadow &#xff1a; none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 相关属性 &#xff1a; 无 取值&#xff1a; <color> &#xff1a; 指定颜色。 <length> &#xff1a…

CSS实现背景透明/半透明效果 但内容文字不透明

针对透明背景&#xff0c;包括背景图片和背景色 一、背景完全透明 .bg{background:transparent } 二、背景半透明 这里要分两个div&#xff0c;一个单独设置背景透明度&#xff0c;另外一个放内容 margin-top:-33px;使用这个方法让文字叠加在透明背景图上。 css: .bg{ width…

css属性:hover

<div class"detail_list_icons"><div class"detail_list_icon"><img class"detail_list_image" src"{% static images/initiate1.png %}"><a>分布式文件系统概述</a></div><div class"de…

404 NOT FOUND!---设置404的作用

抱歉&#xff0c;沒有找到您需要的文章&#xff01;&#xff01; 404页面是网站必备的一个页面&#xff0c;它承载着用户体验与SEO优化的重任。 404页面通常为用户访问了网站上不存在或已删除的页面&#xff0c;服务器返回的404错误。 如果站长没有设置404页面&#xff0c;会出…

windows的远程桌面如何全屏

远程桌面退出全屏/不能全屏/ 全屏切换的技巧 退出全屏 问&#xff1a;我的电脑远程登录到服务器上并且切换到了全屏状态&#xff0c;全屏后发现桌面顶部没有浮动工具栏了&#xff0c;想退出全屏状态&#xff0c;不知如何退出了&#xff0c;最后&#xff0c;只有重启电脑…

hadoop ERROR security.UserGroupInformation: PriviledgedActionException as:root

错误描述&#xff1a; 在运行 hadoop-examples-1.2.1.jar例子时抛错误&#xff01;&#xff01; 命令&#xff1a; ./bin/hadoop jar hadoop-examples-1.2.1.jar grep input_yumh out_yumh dfs[a-z.] 错误内容&#xff1a; 15/10/20 22:04:41 INFO util.NativeCodeLoader: …

三种配置环境变量的方法--path

三种配置环境变量的方法 1. 修改/etc/profile文件 如果你的计算机仅仅作为开发使用时推荐使用这种方法&#xff0c;因为所有用户的shell都有权使用这些环境变量&#xff0c;可能会给系统带来安全性问题。 用文本编辑器打开/etc/profile vim /etc/profile 在profile文件末尾加入…

linux下运行java代码

1. 用文本编辑器新建一个yumhtest.java文件&#xff0c;在其中输入以下代码并保存&#xff1a; public class yumhtest{       public static void main(String args[]) {         System.out.println("hello world !");       }      } 2. …

jps命令显示jvm进程

用来查看基于HotSpot JVM里面所有进程的具体状态, 包括进程ID&#xff0c;进程启动的路径等等。与unix上的ps类似&#xff0c;用来显示本地有权限的java进程&#xff0c;可以查看本地运行着几个java程序&#xff0c;并显示他们的进程号。使用jps时&#xff0c;不需要传递进程号…