如何将元素放置在另一个元素上？

本文介绍了如何将元素放置在另一个元素上？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想在< img> 中放置< div> 。 HTML看起来像这样。 body {background-color：#cCa;}。image {position：relative; background-repeat：no-repeat;}。content {background-color：lightGrey;位置：绝对;溢出：无; left：40px; ：//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.cssrel =stylesheet/>< link href =https：//cdnjs.cloudflare .com / ajax / libs / twitter-bootstrap / 2.3.2 / css / bootstrap-responsive.min.cssrel =stylesheet/>< div class =container-fluid> < div class =row-fluid> < div class =span12> < div class =image> < img src =css_js / img / image.jpg> < / DIV> < div class =content img-circle> [content]< / div> < / DIV> < / div>< / div> 图片：当浏览器尺寸很大时， 在这里输入图片描述 解决方案尝试设置 z-index 内容 div 的属性高于图片，如下所示： .content { z-index：3; } 这会使内容 div 会在图像上方。为了让浏览器变得越来越大，您将需要使用媒体查询。这些是你头脑中包含的标签，可以让你根据屏幕大小加载不同的CSS文件。基本上，当屏幕较小时，您应该为加载的CSS文件设置较大的字体设置。如果您不熟悉媒体查询，请阅读以下内容： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 。祝你好运！ 更新： 根据您的评论，您应该将您的代码更改为： < div class =span12> < div class =image> < img src =css_js / img / image.jpg> < div class =content img-circle> [content]< / div> < / div> < / div> 这使得 img 和 .content 由 .image 包装。然后，在您的CSS文件中添加以下规则： .content { position ：亲戚; } 这将改变内容相对于图像 div 位于。阅读位置属性以了解如何移动 .content 。您仍然需要媒体查询来更新 div 的大小/位置，以响应浏览器大小的变化。 I want to place a <div> over an <img>.The HTML looks like this.body { background-color: #cCa;}.image { position: relative; background-repeat: no-repeat;}.content { background-color: lightGrey; position: absolute; overflow: none; left: 40px; top: 40px;}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet"/><div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div class="image"> <img src="css_js/img/image.jpg"> </div> <div class="content img-circle">[content]</div> </div> </div></div>More info with pics:when browser size is largewhen browser size is small. 解决方案 Try setting the z-index property of the content div higher than the image, like this:.content{ z-index: 3;}This will make it so that the content div will be above the image. To make it get bigger as the browser gets smaller, you are going to need to use media queries. These are tags that you include in your head that will allow you to load different CSS files based on the size of the screen. Basically, you should just have larger font settings for the CSS files loaded when the screen is smaller. If you're unfamiliar with media queries, this is a good place to read up on them: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. Good luck!UPDATE:Based on your comment, you should change your code to this: <div class="span12"> <div class="image"> <img src="css_js/img/image.jpg"> <div class="content img-circle">[content]</div> </div></div>This makes it so that the img and .content are wrapped by the .image. Then, in your CSS file, add this rule:.content{ position: relative;}This will change the position of content relative to where the image div is located. Read up on the position property to learn how to move the .content around. You will still need media queries to update the size/position of the div in response to the browser size changing though. 这篇关于如何将元素放置在另一个元素上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！