絕對定位的DIV中

您好IM具有其中我不能得到定位一個div內的兩個圖像中的問題（見的jsfiddle：http://jsfiddle.net/edddotcom/naEFm/）絕對定位的DIV中

我想要兩個三角形/箭頭（類「三角」）是在所述右上和深灰色灰格的右下角（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>

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 2013-04-29 20:34:09

你需要position:relative;的箭頭圖片，所以他們將留在#main div中，請參閱position:relative;告訴瀏覽器箭頭必須相對於主div放置，「或直接放入其中」（否則position:absolute;將相對於整個<body>標籤進行定位自動。希望這有助於你瞭解問題的和平！

來源

2013-04-29 22:22:10

絕對定位的DIV中

回答

相關問題