html - 在什么情况下使用 position :absolute, position :relative, position:fixed 和 position:static in css-6ren

html - 在什么情况下使用 position :absolute, position :relative, position:fixed 和 position:static in css

转载作者：太空宇宙更新时间：2023-11-04 12:40:12

29

4

我刚开始使用 html5 和 css，我对使用 css position 有点困惑。

我可以从堆栈溢出中找到这些链接，

Difference between relative and absolute

When to use CSS positioning?

Position absolute but relative to parent

我仍然无法解决，我需要通过示例了解所有位置属性，以及在什么情况下必须使用哪个位置属性来开发网页。

先生，你能帮帮我吗？

任何帮助将不胜感激。提前致谢。

最佳答案

.parentClassDiv{
  position:relative;
  border-color:red;
  border-radius:4px;
  border-style:solid;
  height:150px;
  top:100px;
  }
.relativeClass{
  position:relative;
  border-color:green;
  border-radius:4px;
  border-style:solid;
  top:80px;
  left:30px;
  }
.absoluteClass{
  position:absolute;
  border-color:blue;
  border-radius:4px;
  border-style:solid;
  top:120px;
  }
.fixedClass{
  top:30px;
  position:fixed;
  border-color:yellow;
  border-radius:4px;
  border-style:solid;
  left:10px;
  }
.staticClass{
  top:10px;
  left:10px;
  position:static;
  border-color:brown;
  border-radius:4px;
  border-style:solid;
  }

<html>
  
  <head>
  <title>difference b/w relative,absolute,fixed,static</title>
  </head>
  <body>
  <div class='parentClassDiv'>
    <span class='relativeClass'>hello..I am relative..positioned top-40px and left:30px..relative to my parent div(red color)</span>
    <span class='absoluteClass'>hello..I am absolute</span>
    <span class='fixedClass'>hello..I am Fixed..I will be positioned from the page top(i.e:it parent always be html tag)</span>
    <span class='staticClass'>I am Static.even top is 100px.i will be positioned on my place in my parent tag(red color).i will not take top,bottom,left,right.and also i started here only because green color is relative (reserved it place and moved to bottom)</span>
  </div>
  </body>
  
</html>

关于html - 在什么情况下使用 position :absolute, position :relative, position:fixed 和 position:static in css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26942504/

29

4

0

文章推荐： html - 列中的中心图标

文章推荐： c++ - svg 图标在高 DPI 上出现像素化

java - 在具有多个条件的 If 情况下，我们能否获得条件失败的确切位置？
我是 Java 新手，这是我的代码， if( a.name == b.name && a.displayname == b.displayname && a.linknam
javascript - 在下面的 JavaScript 情况下，如何避免重复自己的情况？
在下面的场景中，我有一个 bool 值。根据结果，我调用完全相同的函数，唯一的区别是参数的数量。 var myBoolean = ... if (myBoolean) { retrieve
c++ - 异常(exception)情况下，我想在没有任何堆栈展开的情况下进行调试
我是一名研究 C++ 的 C 开发人员: 我是否正确理解如果我抛出异常然后堆栈将展开直到找到第一个异常处理程序？是否可以在不展开的情况下在任何 throw 上打开调试器(即不离开声明它的范围或任何更高
c++ - 在什么情况/情况下 dynamic_cast<> 会失败？
在修复庞大代码库中的错误时，我观察到一个奇怪的情况，其中引用的动态类型从原始 Derived 类型更改为 Base 类型!我提供了最少的代码来解释问题: struct Base { // some
c# for 循环在 switch/case 情况下 - 如何？
我正在尝试用 C# 扩展给定的代码，但由于缺乏编程经验，我有点陷入困境。使用 Visual Studio 社区，我尝试通过控制台读出 CPU 核心温度。该代码使用开关/外壳来查找传感器的特定名称(即
javascript - 在 AJAX 情况下，如何在目标页面评估 JavaScript？
这可能是一个哲学问题。假设您正在向页面发出 AJAX 请求(这是使用 Prototype): new Ajax.Request('target.asp', { method:"post", pa
html - 在 Usemap/area 情况下，光标未更改为指针
我有以下 HTML 代码，我无法在所有浏览器中正常工作: 我试图在移动到
swift - 在这种 Firebase 情况下，如何在函数之间传递数据？ swift + Xcode
我对 Swift 很陌生。我如何从 addPin 函数中检索注释并能够在我的 addLocation 操作 (buttonPressed) 中使用它。我正在尝试使用压力触摸在 map 上添加图钉，在两
ios - 在 iPad DetailView 情况下，viewDidUnload 未被调用
我设置了一个详细 View ，我是否有几个 Nib 文件根据在 Root View Controller 的表中选择的项目来加载。我发现，对于 Nibs 的类，永远不会调用 viewDidUnloa
javascript - 在这种 javascript 情况下，除了 eval 之外还有其他选择吗？
我需要动态访问 json 文件并使用以下代码。在本例中，“bpicsel”和“temp”是变量。最终结果类似于“data[0].extit1” var title="data["+bpicsel+"]
c# - 在 HTTPS 情况下，服务器证书未使用 HTTP.SYS 正确配置
我需要使用第三方 WCF 服务。我已经在我的证书存储中配置了所需的证书，但是在调用 WCF 服务时出现以下异常。向 https://XXXX.com/AHSharedServices/Custome
postgresql - 即使在 ON CONFLICT DO NOTHING 情况下，postgres INSERT 触发器也会触发
在几个 SO 答案(1、2)中，建议如果存在冲突则不应触发 INSERT 触发器，ON CONFLICT DO NOTHING 在触发语句中。也许我理解错了，但在我的实验中似乎并非如此。这是我的 S
java - 在 Hibernate3 中的 saveOrUpdateAll 情况下，具有相同标识符值的不同对象已与 session 关联
如果进行修改，则会给出org.hibernate.NonUniqueObjectException。在我的 BidderBO 类(class)中 @Override @Transactional(pr
javascript - 为什么 React App 的 redux 情况下 IndexOf(Object) 可以工作？
我使用 indexOf() 方法来精细地查找数组中的对象。直到此刻我查了一些资料，发现代码应该无法正常工作。我在reducer中尝试了上面的代码，它成功了 let tmp = state.find
mysql - 在指定了 ORDER BY 和 LIMIT 并且实际上只需要连接少量行的 JOIN 情况下，MySQL 的行为如何？
假设我有以下表格: CREATE TABLE Game ( GameID INT UNSIGNED NOT NULL, GameType TINYINT UNSIGNED NOT NU
ios - 在使用 swift ios 的某些 URL 情况下，Alamofire 进度状态显示 0.0
代码: Alamofire.request(URL(string: imageUrl)!).downloadProgress(closure: { (progress) in

首页

博学

6Ren·AI

商城

html - 在什么情况下使用 position :absolute, position :relative, position:fixed 和 position:static in css