html中position的一个小用法使用介绍资源-CSDN文库

172 浏览量 2020-12-14 03:51:07 上传评论收藏 32KB PDF 举报

昨天刚学了html的一些内容，就迫不及待的想做个京东上面的搜索条，结果做是做出来了，不过在做那个购物车结算的时候，有个上面显示的数字不知道该怎么加了，如果想让数字跟着购物车一起动的话，就必须将它们两个定位在一起，定位的话肯定就需要position，首先将数字的div的position设置为absolute，有一种层的感觉，因为此时的数字的position的父标记是body所以设置top和left的时候也可以设置到和购物车想要的位置，不过将购物车的margin改变的话，两个无法一起动，所以就把购物车的position设置成为relative，这样数字的position的父标记就变成了购物车，无论在HTML布局中，`position` 属性是一个非常关键的CSS属性，它决定了元素在页面上的定位方式。在本文中，我们将深入探讨`position`属性在HTML中的一个小巧实用的用法，特别是在创建类似京东购物车功能时的应用。我们要明白`position`属性的基本用法。它有四个主要值：`static`（默认值）、`relative`、`absolute`和`fixed`。`static`是元素的默认定位，遵循正常的文档流。`relative`让元素相对于其正常位置进行定位，可以通过`top`、`bottom`、`left`和`right`来调整位置，但不会影响其他元素的位置。`absolute`使元素相对于最近的非`static`定位的祖先元素进行定位，而`fixed`则使元素相对于浏览器窗口定位，即使在滚动时也保持不变。在描述的问题中，我们需要数字跟随购物车一起移动。初始状态下，数字的`div`设置为`absolute`定位，这使得数字可以相对于其最近的静态定位祖先元素（在这种情况下是`body`）进行绝对定位。通过调整`top`和`left`属性，可以将数字放置在购物车的期望位置。然而，当购物车的`margin`改变时，由于数字的定位基点仍然是`body`，因此它们不会一起移动。为了解决这个问题，我们把购物车的`div`的`position`设置为`relative`。这样，购物车现在成为数字的定位参考点，而不是`body`。无论购物车的`margin`如何变化，数字都会根据购物车的新位置进行调整，从而实现数字与购物车同步移动的效果。以下是一个简单的示例代码： ```html <html> <head> <title>day03.html</title> <style type="text/css"> /* 购物车div */ #car { width: 150px; height: 30px; background: #999999; color: white; text-align: center; line-height: 30px; margin: 232px 300px; border: 1px solid black; position: relative; } /* 数字div */ #num { width: 20px; height: 20px; background: red; color: white; text-align: center; line-height: 20px; position: absolute; top: -15px; left: 25px; } </style> </head> <body> <div id="car">去购物车付款 <div id="num">0</div> </div> </body> </html> ``` 在这个例子中，`#car`元素被设置了`position: relative`，而`#num`元素被设置为`position: absolute`。这样，`#num`元素的位置会相对于`#car`元素进行调整，实现了数字始终与购物车保持相对位置的效果。这个技巧在创建动态布局或者需要元素随其他元素移动的场景中非常有用，例如导航菜单、提示信息或浮动元素等。理解并灵活运用`position`属性，可以极大地提高网页设计的灵活性和用户体验。在实际开发中，还需要注意与其他CSS属性如`z-index`结合使用，以解决可能出现的层叠问题，确保元素的显示顺序正确。

资源详情

资源评论

资源推荐