position:相对有用的是什么? [英] What is position:relative useful for?

问题描述

我今天正在考虑CSS定位模式，意识到除了将 position:absolute 用于子元素之外，我从来没有将 position:relative 用于其他任何用途.

I was thinking about CSS positioning modes today and realized that I never use position:relative for anything other than making position:absolute work on child elements.

我更像是一个开发人员"，而不是设计师"，但是这些年来，我已经做了很多基于CSS的布局.我曾经使用过表格，浮点数，边距(正数和负数)，position:absolute甚至position:fixed，但是我认为我从来没有使用过position:relative来实际定位元素.

I'm more of a "developer" than a "designer", but I've done quite a few CSS-based layouts over the years. I've used tables, float, margins (positive and negative), position:absolute, and even position:fixed, but I don't think I've ever had an occasion where I've used position:relative for actually positioning an element.

是否有一些出色的CSS-guru技术依赖于position:relative(在现实世界中的设计中使用)?我错过了吗?

Is there some great CSS-guru technique that relies on position:relative (and is used in real-world designs)? Am I missing out?

推荐答案

如果您要偏移一个元素而不用担心边距及其对其他元素的影响，这将很有用.假设您要故意从容器侧面戳出一个图像，并且(几乎)与容器旁边的某些内容重叠.

It's useful if you want to offset an element without futzing around with margins and its consequences for other elements. Let's say you want to intentionally have an image poke out of the side of a container and (nearly) overlap with some content in a container beside it.

------------- -----
|           | |   |
|   X  -------| Y |
|      |  a  ||   |
|      -------|   |
------------- -----

容器 a 是 X 的常规文本流的一部分，您想要保持这种方式，只希望它稍微向外一点效果整洁.如果您使用边距进行操作，它可能会变得非常混乱，并重排您的其他一些内容.
通过使用 position:relative;左:10px； ，您可以轻松获得该效果而没有副作用.

Container a is part of the normal text flow of X and you want to keep it that way, you just want it poking out of the side a bit as a neat effect. If you do that with margins, it may get really messy and reflow some of your other content.
By using position: relative; left: 10px; you can get that effect easily without the side effects.

这篇关于position:相对有用的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！