问绝对定位不起作用
EN

Stack Overflow用户

提问于 2014-10-20 01:00:54

回答 1查看 66关注 0票数 1

所以我正在使用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，但仍然不能正常工作。到目前为止，我得到了这个输出。

所以当我调整浏览器的大小时，它就会随之改变大小，我想让它停留在页面的右上角。我错过了什么？如果我调整浏览器，图像也会随之移动。这需要我一个小时的时间，所以任何帮助都将受到欢迎。

css

回答 1

Stack Overflow用户

发布于 2014-10-20 01:18:14

如果图像比works just fine标记小，您的代码body将图像固定在左上角和右上角。

你正在使用的图片有多大，你的<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">

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26453023

复制

相似问题

问绝对定位不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问绝对定位不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问绝对定位不起作用
EN