절대 위치

안녕 메신저 내가 두 개의 이미지가 사업부 내에 위치 얻을 캔트에 문제가 (jsfiddle 참조 : http://jsfiddle.net/edddotcom/naEFm/를) 절대 위치

내가이 두 개의 삼각형/화살표 (클래스 "삼각형") 상기가되고 싶어요 오른쪽 상단 어두운 회색 사업부의 오른쪽 아래 (ID "주")

가 (오른쪽

HTML의 왼쪽 및 주요 내용의 메뉴이기 때문에 나는 위치에 다른 모든 요소를 필요

<div id="page"> 
    <div id="container"> 
     <div id="menu"> 
      <ul class="slidingMenu"> 
       <li><a href="#">LINK1</a></li> 
       <li><a href="#">LINK2</a></li> 
       <li><a href="#">LINK3</a></li> 
       <li><a href="#">LINK4</a></li> 
       <li><a href="#">LINK5</a></li> 
       <li><a href="#">LINK6</a></li> 
      </ul> 
     </div> 
     <div id="main"> 
      <h1>Heading</h1> 
      <div id="content"> 
       <img id="mainimg" src="http://onlyhdwallpapers.com/wallpaper/ball_monochrome_desktop_1680x1050_hd-wallpaper-183077.jpg"/> 
      <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p> 
      </div> 
      <div class="structure"> 
      <img id="up" class="triangle" src="http://f0.bcbits.com/z/26/17/2617229726-1.jpg"/> 
      <img id="down" class="triangle" src="http://f0.bcbits.com/z/26/17/2617229726-1.jpg"/> 
      <div> 
     </div> 
    </div> 
</div>

,210

CSS :

body{ 
    background:#292929; 
    font-family: Arial, Helvetica, sans-serif; 
} 
#page{ 
    display:inline-block; 
    text-align:center; 
    width:100%; 
} 
#container{ 
    display:block; 
    background-color:red; 
    width:900px; 
    height:400px; 
    text-align:center; 
} 
#menu{ 
    display:inline-block; 
    background-color:white; 
    width:40%; 
    overflow:none; 
    float:left; 
} 
ul{ 
    list-style:none; 
    text-align:right; 
} 
ul a{ 
    font-size:50px; 
    text-decoration: none; 
    line-height: 50px; 
    padding-right:10px; 
    color: #ddd; 
} 
ul a:hover{ 
    background-color:#999967; 
} 
#main{ 
    background-color:grey; 
    width:60%; 
    float:right; 
    max-height:330px; 
} 
#mainimg{ 
    width:40%; 
    float:left; 
    margin:10px; 
    max-height:300px; 
} 
#main p{ 
    text-align:justify; 
    padding-left:10px; 
    padding-right:10px; 
    margin-top:0px; 
} 
#content{ 
    max-height:250px; 
    overflow-y:auto; 
} 
.structure{ 
    display:block; 
    height:40px; 
    background-color:white; 
    width:20px; 
} 
#up{ 
    position:absolute; 
    top:0px; 
    right:0px; 
    height:20px; 
    width:20px; 
} 
#down{ 
    -webkit-transform: scaleY(-1); 
    position:absolute; 
    bottom:0px; 
    right:0px; 
    height:20px; 
    width:20px; 
}

당신이 좋은 것 무엇이 최선인지 생각과 jsfiddle을 편집 할 수 있다면

출처

2013-04-29 Edd

이 position:relative을 추가 #main합니다 :

#main { 
    background-color:grey; 
    width:60%; 
    float:right; 
    max-height:400px; 
    position:relative; 
}

jsFiddle example

출처

2013-04-29 20:32:40 j08691

나를 이길! 설명 :'display : absolute'는'position : absolute' 또는'position : relative'로 찾은 첫 번째 부모 컨테이너의 범위 내에 위치합니다 – Indigenuity

당신은 position:relative; 화살표 이미지가 필요합니다. 그들은 #main div에 머무를 것이고, position:relative;은 화살표가 주 div에 상대적으로 위치해야한다는 것을 브라우저에 알립니다. "그렇지 않으면 div가 직접 입력됩니다."(그렇지 않으면 position:absolute;은 전체 <body> 태그에 상대적으로 배치됩니다 자동으로 희망이 문제의 평화를 이해하는 데 도움이되기를 바랍니다!

출처

2013-04-29 22:22:10

답변

관련 문제