position 属性可以用来构建下拉菜单、模态框以及现代 Web 应用程序的一些基本效果。
定位可能变得很复杂。许多开发人员对它只有粗略的理解。如果不完全了解定位以及它可能带来的后果，就很容易给自己挖坑。有时候你可能会把错误的元素放在其他元素前面，要解决这个问题却没有那么简单。
层叠上下文，它属于定位的一个隐藏的副作用。理解层叠上下文能帮你避免不必要的麻烦，当你被一个页面布局绕进去了，它还能帮你找到问题的突破口。
position 属性的初始值是 static。如果把它改成其他值，我们就说元素就被定位了。而如果元素使用了静态定位，那么就说它未被定位。
1. 固定定位
固定定位不如其他定位类型用得普遍，但它是最好理解的一种定位类型。
给一个元素设置 position: fixed 就能将元素放在视口的任意位置。这需要搭配四种属性一起使用： top、 right、bottom 和 left。这些属性的值决定了固定定位的元素与浏览器视口边缘的距离。比如， top: 3em 表示元素的上边缘距离视口顶部 3em。
设置这四个值还隐式地定义了元素的宽高。比如指定 left: 2em; right: 2em 表示元素的左边缘距离视口左边2em，右边缘距离视口右边 2em。因此元素的宽度等于视口总宽度减去4em。 top、 bottom 和视口高度也是这样的关系。
1.1. 用固定定位创建一个模态框
通常情况下，模态框用于要求用户阅读一些内容或者在下一步操作之前输入一些内容。比如，下图的模态框展示了一个表单，用户可以注册一个时事通讯。初始状态下用 display: none隐藏弹窗，然后用 JavaScript 将 display 改成 block 以显示弹窗。
创建一个新的页面，将代码清单1加到元素中。这段代码将所有内容放在两个容器元素中，同时用一个
若有收获，就点个赞吧
0 人点赞
