CSS Div职位

Question

我是html的初学者而且我一无所知，如果我似乎无知，我道歉。

在这张图片示例中，我应该使用绝对位置或相对容器

我需要制作多少总容器

这是我目前的代码：

＆＃13;

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

此外，第二个分区容器不包含在第一个带边框的容器中，可能导致它

Answer 1

将元素定位为绝对元素要求其某些容器具有position: relative属性。相对位置容器将作为绝对定位元素的引用字段。因此，只需将position: relative添加到父容器，如下面的代码所示。 你真的想要

吗？

<div style="border-style: solid; border-color:blue; position: relative">
    	<div>
    		<img id="logo"src="insta.jpg">
    		<img id="logo"src="twitter.png">
    		<img id="logo"src="facebook.png">
            <br>
    	    <br>	
    		<img 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>

Answer 2

JSFiddle Here

＆＃13;

＆＃13;

.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;
}

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个

<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; right :0px; left: 0px; 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>