위치 요소를 멈추는 방법 : 정적 위치 요소가 겹치지 않도록 고정하십시오.

저는 CSS 포지셔닝에있어 초보자입니다.위치 요소를 멈추는 방법 : 정적 위치 요소가 겹치지 않도록 고정하십시오.

내 문제 : 소셜 네트워킹 사이트에 대한 링크가 포함 된 요소를 만들려고합니다. 이 요소를 "위치 : 고정;" 스크롤하지 않기 때문에 내 사회 소셜 div (내 웹 사이트의 나머지 부분이 포함되어 있음)와 #bodycontainer div 사이에 여백을두고 싶습니다. 여백은 브라우저 창을 참조하는 (그러나 #bodycontainer의 사업부의 기반으로

은 기본적으로 내가 원하는 :.

는 웹 사이트 (나머지) #bodycontainer 중첩에서 #social DIV 금지, 아직 # 유지 사회의 위치 : 고정
#social과 #bodycontainer 사이에 여백을 유지하십시오. 브라우저 창에서 여백을 기준으로하지 않으려 고합니다. #bodycontainer div를 기반으로하고 싶습니다. 어떻게해야합니까? ? (나 #social이 #bodycontainer 왼쪽의 5 픽셀이되도록하고 싶습니다.

내 코드 (단축) :

<body> 

<div id="social"> 

<div id="socialimages"> 
<a href="http://facebook.com/connor.lydon" target="_blank"> 
<img src="fblogo.gif"> 
</a> 
<a href="http://instagram.com/connorlydon" target="_blank"> 
<img src="instalogo.gif"> 
</a> 
</div> 
</div> 




<div id="bodycontainer"> 
<img src="lydon_websiteanimation.gif" id="header"> 
</div> 

</body> 


#social { 
position: fixed; 
float: left; 
width: 200px; 
height: 100px; 
margin-left: 10px; 
background-image: url(socialtalk.png); 
background-repeat: no-repeat; 
background-position: top-left; 
} 

#socialimages { 
width: 45px; 
height: 100px; 
margin-left: 200px; 
margin-top: 60px; 
} 

#bodycontainer { 
margin-left: auto; 
margin-right: auto; 
width: 726px; 
}

나는이 아주 간단한 질문이라고 추측하고, 나는 죄송합니다. 나는 많은 가이드를 보았고 혼자서 알아 내지 못하는 문제가있었습니다.

내 질문의 일부를 다시 말하면 잘 이해할 수 있습니다. 다음과 같이 말하십시오. - 기꺼이!

내가 받게 될 도움에 대해 크게 감사드립니다.

감사합니다.

출처

2013-05-09 ConnorLydon

이 문제를 설명? –

이 시도 :

나는이 문제를 볼 수 없습니다 당신이 보여 http://jsfiddle.net/h9FqE/를 사용할 수

<body> 

<div id="social"> 

<div id="socialimages"> 
<a href="http://facebook.com/connor.lydon" target="_blank"> 
<img src="fblogo.gif"> 
</a> 
<a href="http://instagram.com/connorlydon" target="_blank"> 
<img src="instalogo.gif"> 
</a> 
</div> 
</div> 




<div id="bodycontainer"> 
<img src="lydon_websiteanimation.gif" id="header"> 
</div> 

</body> 


#social { 
position: fixed; 
float: left; 
width: 200px; 
height: 100px; 
margin-left: 10px; 
background-image: url(socialtalk.png); 
background-repeat: no-repeat; 
background-position: top-left; 
} 

#socialimages { 
width: 45px; 
height: 100px; 
margin-left: 200px; 
margin-top: 60px; 
} 

#bodycontainer { 
width: 726px; 
position: absolute; 
left: 50%; 
margin-left: -363px; 
z-index: 1; 
}

출처

2013-05-09 21:24:05 user2336174

위치 요소를 멈추는 방법 : 정적 위치 요소가 겹치지 않도록 고정하십시오.

답변

관련 문제