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非常准确，但我不知道为什么会这样，并且通过反复试验来完成。

如何实现这一目标？请提供解释＆＃34;为什么＆＃34;它有效，而不仅仅是一个快速修复。

PS。请注意，我问了一个类似的问题How do I place one element precisely over another element?但是没有得到任何答案，而且这个问题与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 - ＆gt;输入到：

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

Answer 2

这是因为div.divWrapper缠绕在a.link上，并且采用了子元素的宽度，但只有内联子元素的高度没有填充，边缘或边界。

因此，当一个人在<input>上使用绝对定位时，需要通过填充和边界量来提升。

对于水平定位，left 0会将其放置在<a>的左上边距，但由于它应放在边框编辑处，因此需要将其向右移动。 / p>

最终的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 个答案: