使用CSS將元素放置在另一個元素上

Question

我需要將<input>恰好放在<a>上方，使<input>的邊緣與<a>的外部邊界鏈接起來，並且不要更改任何其他表示形式。 請參閱https://jsbin.com/cotogimaqo （腳本重復如下）。

以下信息是有關a.link已知信息，可以（但不是必須）在CSS中使用。

width   39px
height  17px
outerWidth w/o margin   99px
outerWidth w/ margin    159px
outerHeight w/o margin  77px
outerHeight w/ margin   137px

在“ Attempt 1 ，我認為我可以使用position:absolute並固定top ， right ， bottom和left位置，但是它不起作用。

在“ Attempt 2 ，“ Attempt 3 ”和“ Attempt 4 ，我嘗試了其他幾種方法，但仍然無法正常工作。

Attempt 5相當准確，但我不知道為什么會這樣，並且是通過反復試驗來完成的。

如何做到這一點？ 請提供“為什么”有效的解釋，而不僅僅是快速解決方案。

PS。 請注意，我問了一個類似的問題，如何將一個元素精確地放置在另一個元素上？ ，但是沒有得到任何答案，並且這個問題與JavaScript有關。 這個問題非常不同，僅涉及CSS。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <style type="text/css">
            .box{margin:5px;padding:5px;border: 1px solid black;width:200px;}
            .link{margin:30px;padding:20px;border: 10px solid black;}
            .divWrapper{margin:0;padding:0;display:inline; position:relative;}
            #wrapper{width:600px;}
            #info{float:right;}
            .divWrapper input{margin:0;border: 1px dashed red;cursor:pointer;} /*.divWrapper input{z-index:9999;opacity:0;} */
            /* this is the part I need help with.
            Known information about a.link:
            width 38px, height 18px, outerWidth w/o margin 98px, outerWidth w/ margin 158px, outerHeight w/o margin 78px, outerHeight w/ margin 138px
            */
            #div1 input{
                position:absolute;top:0;right:0;bottom:0;left:0;
            }
            #div2 input{
                position:absolute;top:0;left:0;
                width:98px;height:78px;
            }
            #div3 input{
                position:absolute;top:0;left:0;
                width:98px;height:78px;
                margin:30px;
            }
            #div4 input{
                position:absolute;top:30px;left:30px;
                width:98px;height:78px;
            }
            #div5 input{
                position:absolute;top:-30px;left:30px;
                width:98px;height:78px;
            }

        </style> 
        <script type="text/javascript">
            /*The following JavaScript is just to provide link information and is not related to the question */
            $(function () {
                var link=$('#div1 a.link');
                var tableRows=$('#info tr');
                tableRows.eq(0).find('td').eq(1).text(link.css('width'));
                tableRows.eq(1).find('td').eq(1).text(link.css('height'));
                tableRows.eq(2).find('td').eq(1).text(link.outerWidth(false)+'px');
                tableRows.eq(3).find('td').eq(1).text(link.outerWidth(true)+'px');
                tableRows.eq(4).find('td').eq(1).text(link.outerHeight(false)+'px');
                tableRows.eq(5).find('td').eq(1).text(link.outerHeight(true)+'px');
                $('.divWrapper').click(function(){alert('input clicked.');return false;})
            });
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div id="info">
                <h2>a.link info</h2>
                <table>
                    <tr><td>width</td><td></td></tr>
                    <tr><td>height</td><td></td></tr>
                    <tr><td>outerWidth w/o margin</td><td></td></tr>
                    <tr><td>outerWidth w/ margin</td><td></td></tr>
                    <tr><td>outerHeight w/o margin</td><td></td></tr>
                    <tr><td>outerHeight w/ margin</td><td></td></tr>
                </table>
            </div>
            <div id="div1" class="box"><p>Attempt 1</p>Vel labitur sanctus antiopam at. <div class="divWrapper"><a class="link" href="javascript:void(0)">LINK</a><input type="file" name="bla"></div>.  Ludus temporibus et duo. Nullam consequuntur comprehensam id eos, nec ad quot mucius oportere.</div>
            <div id="div2" class="box"><p>Attempt 2</p>Vel labitur sanctus antiopam at. <div class="divWrapper"><a class="link" href="javascript:void(0)">LINK</a><input type="file" name="bla"></div>.  Ludus temporibus et duo. Nullam consequuntur comprehensam id eos, nec ad quot mucius oportere.</div>
            <div id="div3" class="box"><p>Attempt 3</p>Vel labitur sanctus antiopam at. <div class="divWrapper"><a class="link" href="javascript:void(0)">LINK</a><input type="file" name="bla"></div>.  Ludus temporibus et duo. Nullam consequuntur comprehensam id eos, nec ad quot mucius oportere.</div>
            <div id="div4" class="box"><p>Attempt 4</p>Vel labitur sanctus antiopam at. <div class="divWrapper"><a class="link" href="javascript:void(0)">LINK</a><input type="file" name="bla"></div>.  Ludus temporibus et duo. Nullam consequuntur comprehensam id eos, nec ad quot mucius oportere.</div>
            <div id="div5" class="box"><p>Attempt 5</p>Vel labitur sanctus antiopam at. <div class="divWrapper"><a class="link" href="javascript:void(0)">LINK</a><input type="file" name="bla"></div>.  Ludus temporibus et duo. Nullam consequuntur comprehensam id eos, nec ad quot mucius oportere.</div>
        </div>
    </body> 
</html>

Answer 1

將每個div->輸入更改為：

input {
    height: 41px;
    left: 13px;
    position: absolute;
    top: -12px;
    width: 58px;
}

Answer 2

發生這種情況是因為div.divWrapper包裹在a.link周圍，並且采用了子元素的寬度，但是僅是內聯子元素的高度，沒有填充，邊距或邊框。

因此，當在<input>上使用絕對定位時，需要通過填充和邊框數量來提高它的位置。

至於水平定位， left 0會將其放置在<a>的外部左邊緣處，但是由於應將其放置在邊框編輯處，因此需要將其向右移動邊緣。

最終的CSS應該是：

#divWorking input{
  position:absolute;
  top:-30px;    /* padding (20px) plus border (10px) */
  left:30px;    /* same as margin (30px) */
  width:98px;   /* text in <a> width plus <a> padding and border width */
  height:78px;  /* text in <a> height plus <a> padding and border height */
}

使用CSS將元素放置在另一個元素上

問題描述

2 個解決方案

解決方案1
0 2015-10-24 14:13:35

解決方案2
0 已采納 2015-10-24 15:39:43

使用CSS將元素放置在另一個元素上

問題描述

2 個解決方案

解決方案1 0 2015-10-24 14:13:35

解決方案2 0 已采納 2015-10-24 15:39:43

解決方案1
0 2015-10-24 14:13:35

解決方案2
0 已采納 2015-10-24 15:39:43