Question

所以我正在使用bootstrap然后我有这些图像，我想放在页面的右上角，但似乎position:absolute不起作用所以我不知道我是什么我在这里失踪了。我用谷歌搜索了很多次，但没有给我运气，我有相同的代码。而且我也试过了一些替代方案或提示和技巧，但仍然无效。所以这是我的代码html。

   <body>
   <img id="swirl-left" src="assets/images/swirl1-panel1.png">
   <img id="swirl-right" src="assets/images/swirl2-panel1.png">

这是我的图片的html结构，我有这个css：

   #swirl-left { position:absolute; left:0; top:-10px;z-index: 2;}
   #swirl-right { position:absolute; right:0;top:-11px; z-index: 1;}

我尝试了float:right，但仍然没有让它发挥作用。我现在得到了这个输出。

enter image description here

因此，当我重新调整浏览器的大小时，它会随之而来。我希望它停留在页面的右上角。我错过了什么？如果我调整浏览器，图像会随之移动。我需要一个小时才能得到任何帮助。

Answer 1

如果图片小于正文标记，则代码works just fine将图片固定到左上角和右上角。

您使用的图片有多大，<body>有多宽？您没有设置任何特定值，因此图像以全尺寸显示。

您的“输出”图像看起来像所有图像都与身体尺寸相同，所以它们只是堆叠在一起。

如果你在CSS中给它们所有特定的宽度/高度属性它应该工作。在这个2nd example中，图像实际上是500x500，它将以全尺寸重叠，但CSS width属性使它们适合。您可以使用固定像素值，也可以使用百分比（如果您希望图像具有响应性）。

body {
    width: 900px;    
}

#swirl-left { 
    width: 150px;
    position:absolute; 
    left:0; 
    top:-10px;
}

#swirl-right { 
    width: 150px;
    position:absolute; 
    right:0;
    top:-10px;
}

或者，由于您使用的是Bootstrap，因此您可以使用img标记上的类来描述尺寸和尺寸。您希望图片占据的列数，例如col-sm-2或其他内容。

 <img id="swirl-left" class="col-sm-2" src="assets/images/swirl1-panel1.png">
 <img id="swirl-right" class="col-sm-2" src="assets/images/swirl2-panel1.png">

绝对定位不起作用

1 个答案: