html - CSS Div 位置

Question

我是 html 的初学者，我一无所知，如果我显得无知，我深表歉意。

在这个图片示例中，我应该为容器使用绝对位置还是相对位置

我需要制作多少个容器

这是我目前拥有的代码:

 <div style="border-style: solid;border-color:blue;">
    	<div>
    		<img id="logo"src="insta.jpg">
    		<img id="logo"src="twitter.png">
    		<img id="logo"src="facebook.png">
            <br>
    	    <br>	
    		<img style="float:left;"src="u1.png">
    		<p> <strong> Ali Omar <br> November 13,2017 </strong> </p>
    		<br>
    		<p> The important difference is that floated elements still remain a part of the "flow" of the page where absolutely positioned elements do that. 
    		As such, they can be more than "flexible" choice. </p>
    	</div>
    		
    		
    	<div style="position:absolute;border-style: solid;border-color:orange;">
    	    <br>
    		<img style="float:left;"src="u2.png">
    		<p> <strong> Guest <br> November 13,2017 <br> Hi Ali,,, </strong> </p>
    		<br>
    		<p> When i'm increasing a window size, the div container is not fixed in a particular position, I also used an absolute position, but it is not working. help me </p>
    	</div>
    	
    </div>

另外，第2个分区的容器没有包含在第一个分区中，有边框，可能是什么原因造成的

Answer 1

JSFiddle Here

.first {
  border: 5px solid black;
  height: auto;
  position: relative;
  padding: 5px;
  margin-bottom: 50px;
  margin-top: 50px;
}
.first img {
  position: relative;
  height: auto;
}

.second {
  position: relative;
}
.second img {
  position: relative;
}

 <div style="border-style: solid;border-color:blue;">
    	<div class="icon" style="float:right">
    		<img id="logo"src="https://www.circle-cafe.com/files/social-icons/in.svg">
    		<img id="logo"src="https://ugihvac.com/wp-content/uploads/2015/10/twitter_icon.png">
    		<img id="logo"src="http://saconnects.org/wp-content/uploads/Facebook-icon-e1447702821330.png">
      </div>
        <br><br>
        <div class="first">
    		<img style="float:left;"src="https://d30y9cdsu7xlg0.cloudfront.net/png/17241-200.png">
    		<p> <strong> Ali Omar <br> November 13,2017 </strong> </p>
    		<br>
    		<p> The important difference is that floated elements still remain a part of the "flow" of the page where absolutely positioned elements do that. 
    		As such, they can be more than "flexible" choice. </p>
        </div>
    		
    		
    	<div class="second" style="border-style: solid;border-color:orange;">
    	    <br>
    		<img style="float:left;"src="https://d30y9cdsu7xlg0.cloudfront.net/png/17241-200.png">
    		<p> <strong> Guest <br> November 13,2017 <br> Hi Ali,,, </strong> </p>
    		<br>
    		<p> When i'm increasing a window size, the div container is not fixed in a particular position, I also used an absolute position, but it is not working. help me </p>
    	</div>
      <br>
    </div>