Css DIV内的绝对定位

嗨，我遇到了一个问题，我无法在一个div中定位两个图像（请参阅jsfiddle:）

我希望两个三角形/箭头（“三角形”类）位于深灰色div（id“main”）的右上角和右下角

我需要所有其他元素按原样定位（左侧的菜单和右侧的主要内容）

HTML:

---

如果你能用你认为最好的方法编辑JSFIDLE，那就太好了

将

位置：相对
添加到#main:

您需要
定位：相对；
箭头图像，以便它们留在
#main
div中，请参见
位置：相对；
告诉浏览器箭头必须相对于主div定位，“或直接插入”，（否则，
position:absolute；
将自动相对于整个
标记定位。希望这有助于您理解问题所在！
请告诉我！说明：
display:absolute
将定位在它使用
position:absolute
找到的第一个父容器的边界内，或者<代码>位置：相对
<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>

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

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