将横幅放在网站的右侧

Question

我不知道如何在网站右侧使用CSS定位图像。我需要从页面中心和顶部的绝对值。我无法使用左或右的绝对值，因为我希望横幅始终位于主要内容的右侧（同样在调整浏览器大小时）。主要内容位于页面的中心。由于图像大小可能会发生变化，因此它应始终与页面内容保持相同的距离。

怎么做？

谢谢，

伊万

编辑：这是我想象的虚拟草图。

Answer 1

你的意思是这样的吗？横幅位于页面右侧。

检查http://jsfiddle.net/rnBTH/

处的工作示例

如果您希望横幅div位于内容div之外

检查此工作示例http://jsfiddle.net/rnBTH/2/

或者您可以将横幅div保留在内容div中，但使用margin negative

将其放在内容div之外

检查此工作示例http://jsfiddle.net/rnBTH/1/

Answer 2

#content {
  background-color: blue;
  width: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#banner {
  background-color: red;
  width: 150px;
  position: absolute;
  left: calc(75% + 15px);
}

<div id="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Vel elit scelerisque mauris pellentesque. Diam phasellus vestibulum
  lorem sed risus ultricies tristique nulla. Facilisis magna etiam tempor orci. Convallis a cras semper auctor neque vitae tempus. Lorem sed risus ultricies tristique. Gravida cum sociis natoque penatibus. A cras semper auctor neque vitae tempus quam
  pellentesque. Morbi tristique senectus et netus et. Platea dictumst quisque sagittis purus sit amet. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. Mauris nunc congue nisi vitae suscipit tellus mauris. Sed nisi lacus sed viverra tellus.
  Eget mi proin sed libero enim sed faucibus. Gravida quis blandit turpis cursus in. Purus non enim praesent elementum facilisis. Odio aenean sed adipiscing diam donec. Id eu nisl nunc mi ipsum. Tellus mauris a diam maecenas sed enim. Nibh praesent tristique
  magna sit. Sapien nec sagittis aliquam malesuada bibendum. Commodo elit at imperdiet dui accumsan sit amet nulla. Augue neque gravida in fermentum et. Augue eget arcu dictum varius duis at. Diam vel quam elementum pulvinar. Justo nec ultrices dui sapien
  eget. Nisi quis eleifend quam adipiscing vitae. Mauris sit amet massa vitae tortor condimentum. Velit euismod in pellentesque massa placerat duis ultricies. Nunc sed blandit libero volutpat sed cras ornare. Tempus egestas sed sed risus pretium quam
  vulputate dignissim. Lacus sed viverra tellus in hac. Quam adipiscing vitae proin sagittis. Mi in nulla posuere sollicitudin aliquam. Ut etiam sit amet nisl purus in. Enim sed faucibus turpis in eu. In arcu cursus euismod quis. Amet consectetur adipiscing
  elit duis tristique sollicitudin nibh sit amet. In iaculis nunc sed augue lacus. Egestas fringilla phasellus faucibus scelerisque eleifend. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Vitae sapien pellentesque habitant morbi
  tristique senectus et netus et. Duis ultricies lacus sed turpis tincidunt id. Nunc pulvinar sapien et ligula ullamcorper. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Dignissim cras tincidunt lobortis feugiat vivamus at augue
  eget arcu. Dignissim suspendisse in est ante. Sed cras ornare arcu dui vivamus. Id porta nibh venenatis cras. Dignissim enim sit amet venenatis urna cursus eget. Eu tincidunt tortor aliquam nulla facilisi. Netus et malesuada fames ac turpis egestas
  sed tempus urna. Turpis in eu mi bibendum neque egestas congue quisque. Non tellus orci ac auctor augue mauris augue. Nisi scelerisque eu ultrices vitae auctor. Nunc sed blandit libero volutpat sed cras. Ornare lectus sit amet est placerat in egestas
  erat imperdiet. Praesent elementum facilisis leo vel. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing. Ut enim blandit volutpat maecenas volutpat blandit. Senectus et netus et malesuada fames.
</div>

<div id="banner">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Vel elit scelerisque mauris pellentesque. Diam phasellus vestibulum
  lorem sed risus ultricies tristique nulla. Facilisis magna etiam tempor orci. Convallis a cras semper auctor neque vitae tempus. Lorem sed risus ultricies tristique. Gravida cum sociis natoque penatibus.
</div>

如果全屏显示它可能会更好，它并没有针对堆栈溢出的小片段尺寸进行过优化。如果您需要它来工作，我建议您进行一些@media查询，以删除居中并将标语移到其他位置。