css - 相对和绝对的区别

标签 css

<分区>

我正在读这个 article about position ,我不明白为什么 in this example相对定位的 div 受 BODY 影响,但绝对定位的框忽略它?
当它们定位在另一个元素内时,它们的行为不应该相同吗?

CSS:

body {
     display: block;
     margin: 8px;
}

#box_1 { 
     position: relative;
     width: 200px;
     height: 200px;
     background: #ee3e64;
}
#box_2 { 
     position: absolute;
     top: 0;
     left: 100px;
     width: 200px;
     height: 200px;
     background: #44accf;
}

最佳答案

基本上你有四种位置状态,如下:

  • 静态(默认)
  • 亲戚
  • 固定
  • 绝对

relative 和 absolute 的区别在于 relative 是相对于它自己的(left:15px 会用 15px 向左填充),而 absolute 是相对于它的父级(第一个非-静态父元素)并应用相同的属性(左:15px)将导致它从父元素的左边缘移动 15px。

这实际上是一项引人入胜的研究,将极大地帮助理解网页布局。

关于css - 相对和绝对的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6997895/

相关文章:

html - Div 高度 100% 的内容

html - 使用 Bootstrap 响应式网格系统时如何为图像提供动态宽度和高度

html - 使用 Bootstrap 粘性导航栏进行 Href 跳转

html - 如何根据溢出元素的宽度将内容居中?

javascript - PHP Mysql Insert Into 不工作,没有数据发布到数据库时没有错误,早些时候同一页面正在工作

html - 降低 Twitter Bootstrap 输入字段的高度?

CSS :after element relative position

javascript - Bootstrap Dropdown - 移动其他内容

html - 使两个 flex 元素排成一行

jquery - 使用 jQuery 定位外部父级的 css