左上角/右上角和右下角/左上角的菜单图标

Question

我很难弄清楚如何在div的每个角落放置四个菜单图标。有人能帮我吗？

Answer 1

查看下面的代码，了解如何设置这种类型的布局。然后去这个jsfiddle看看它看起来怎么样。基本上，您希望在相对定位的元素（父div）中使用绝对定位的元素。这样可以显式指定子元素在父元素中的位置。您可以为每个元素指定顶部、左侧、右侧和底部的css属性。

下面的第一个css类表示，任何类为outside的DIV元素都应该使用这些设置进行样式设置。其余的工作方式相同。

CSS：

div.outside
{
    border: 1px solid black;     
    width: 200px; 
    height: 200px;
    margin: 5px;
    position: relative;
}
div.topLeft
{
    border: 1px solid red;     
    width: 50px; 
    height: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
}
div.bottomRight
{
    border: 1px solid green;     
    width: 50px; 
    height: 50px;
    position: absolute;    
    bottom: 10px;
    right: 10px;
}
div.topRight
{
    border: 1px solid blue;     
    width: 50px; 
    height: 50px;
    position: absolute;
    top: 10px;
    right: 10px;
}
div.bottomLeft
{
    border: 1px solid yellow;     
    width: 50px; 
    height: 50px;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

在下面的HTML中，类为outside的DIV是容器。里面的DIV将是你放置图标的地方（我有TL、BR、TR和BL）。HTML：

<div class="outside">    
    <div class="topLeft">TL</div>
    <div class="bottomRight">BR</div>
    <div class="topRight">TR</div>
    <div class="bottomLeft">BL</div>
</div>