对角放置 HTML 元素

Question

我是 Javascript 新手，对 HTML 比较陌生。我想知道我应该使用哪种语言（纯 html 或 Javascript 和 html）以及一些算法建议，以便执行以下操作：

在背景上放置 4 个正方形，但要对角放置。每个方块都是一个链接，您可以单击以转到不同的页面。 那么我如何才能像下面的图片一样对角放置 html 元素？

http://i54.tinypic.com/2v7uw5u.png

我相信我的代码应该是这样的：

<script>
    function positionIt()
    {
        var screenW = // javascript function to get screen width??;
        var screenH = // javascript function to get screen height??;

        var sq1 = document.getElementById( "square1" );
        var sq2 = document.getElementById( "square2" );
        var sq3 = document.getElementById( "square3" );
        var sq4 = document.getElementById( "square4" );

        // What javascript functions set a elements x,y positions?
        // Should I use another way of positioning the square (not by absolute terms)
        sq1.setXPos( screenW / 4 );
        sq1.setYPos( screenH / 4 );

        sq2.setXPos( screenW / 3 );
        sq2.setYPos( screenH / 3 );
    }
</script>

// OR if I use css
.menu { background-color: blue; }
/* Position the square in absolute terms diagonally */
#square1 { x=200; y=200; }
#square2 { x=300; y=300; }
#square3 { x=400; y=400; }
#square4 { x=500; y=500; }

<div class="menu" onload="positionIt()">
    <a id="square1" href="home.html"><img src="square.jpg" /></a>
    <a id="square2" href="home.html"><img src="square.jpg" /></a>
    <a id="square3" href="home.html"><img src="square.jpg" /></a>
    <a id="square4" href="home.html"><img src="square.jpg" /></a>
</div>

Answer 1

您可以为此使用绝对定位。

在 CSS 中：

#menu {
    position: relative;
    width: /*enough width for all of the positioned elements*/
    height: /*enough height for all of the position elements*/
}
#squareN {
    top: /*how far from top of #menu*/
    left: /*how far from left of #menu*/
    position: absolute;
    width: /*as required*/
    height: /*as required*/
}

Answer 2

Live Demo
Live Demo（left 属性顺序已更改以匹配您的模型）

我尽量保持你要求的数字。

HTML：

<div class="menu">
    <a id="square1" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a>
    <a id="square2" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a>
    <a id="square3" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a>
    <a id="square4" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a>
</div>

CSS：

.menu {
    background: blue;
    width: 800px;
    height: 800px;
    position: relative
}
/* Position the square in absolute terms diagonally */
#square1 { position:absolute; left:200px; top:200px; }
#square2 { position:absolute; left:300px; top:300px; }
#square3 { position:absolute; left:400px; top:400px; }
#square4 { position:absolute; left:500px; top:500px; }

这是如何工作的？见：http://css-tricks.com/absolute-positioning-inside-relative-positioning/