2013-05-20 8 views
0

저는 float없이 위치를 지정하는 것을 좋아합니다. 위치를 얻는 방법은 없습니다 : 친척; 다른 모든 자녀를 무시하고 부모와 관련된 것입니다. 부모가 아니기 때문에 절대 사용할 수 없습니다.CSS 상대방은 부모를 기준으로 모든 하위를 무시해야합니다.

.myDiv 
{ 
    float: left; 
    margin-left: 10px; 
    margin-top: 10px; 
    padding: 0px; 
    width: 100px; 
    height: 100px; 
    background-color: grey; 
} 

.myDiv1 
{ 
    background-color: green; 
    width: 10px; 
    height: 10px; 
    position: relativ; 
    top: 20px; 
    left: 10px; 
    display: inline-block; 
} 

.myDiv2 
{ 
    background-color: red; 
    width: 10px; 
    height: 10px; 
    position: relativ; 
    top: -20px; 
    left: 30px; 
    display: inline-block; 
} 

.myDiv3 
{ 
    background-color: black; 
    width: 10px; 
    height: 10px; 
    position: relativ; 
    top: -50px; 
    left: 50px; 
    display: inline-block; 
} 

은 제외 좋아하지 : http://jsfiddle.net/VLk6m/16/

+3

질문을 좀 더 명확하게 해주시겠습니까? 무엇을 성취하고 싶습니까? – gamehelp16

+0

거기에 오타가 있음에 유의하십시오. 'position : relative; 대신'position : relativ;'를 사용하십시오. –

+0

당신이 * 원하는 * 이미지를 가지고 있으면 도움이 될 것입니다. – Shauna

답변

4
  1. 그것은 relativ 그것이 relative 것 아니다 (모든 아이들이 같은 최고 위치에있는). 부모가 position: relative이있는 경우
  2. 당신은 position: absolute을 사용할 수 있습니다 : 당신이 상대 올바르게 철자 경우 JSFiddle
+0

복사 및 붙여 넣기로 타이핑 경고가 혼합되었습니다! – Pete

0

http://jsfiddle.net/VLk6m/19/

이 확실히 가능하다.

당신은 position: relativ;이어야합니다. position: relative;이어야합니다. 그러면 lefttop 속성을 0으로 설정하십시오.

.myDiv 
{ 
    float: left; 
    margin-left: 10px; 
    margin-top: 10px; 
    padding: 0px; 
    width: 100px; 
    height: 100px; 
    background-color: grey; 
} 

.myDiv1 
{ 
    background-color: green; 
    width: 10px; 
    height: 10px; 
    position: relative; 
    top: 0px; 
    left: 0px; 
    display: inline-block; 
} 

.myDiv2 
{ 
    background-color: red; 
    width: 10px; 
    height: 10px; 
    position: relative; 
    top: 0px; 
    left: 0px; 
    display: inline-block; 
} 

.myDiv3 
{ 
    background-color: black; 
    width: 10px; 
    height: 10px; 
    position: relative; 
    top: 0px; 
    left: 0px; 
    display: inline-block; 
} 
관련 문제