html - 相对 div 中图像的对齐命令没有响应

Question

我给出了一个使用百分比% 的alignment 命令(例如:left:10%, bottom: 20% ;) 对于位于 position:relative div 中但没有响应的图像。有没有办法解决这个问题？另外，请记住图像是在 50%

的 div 中设置的

这是一个jsfiddle .

提前致谢!

HTML

<!-- -- -- LEFT SIDE -- -- -->
<aside class="half left">

        <section class="reform" style="right: 0; top: 30px;">
            <img width="200px" src="http://reform.lt/data/images/2013/01/tumblr-mggblgyswc1qabyt1o1-500.jpg" alt="Selected Image" title="Image Title" />
            <span class="caption label"><span class="parenthesis">(</span>TOP working<span class="parenthesis">)</span></span>
            <span class="caption">
                <p>SETTING</p>
                <p> right: 0; top: 30px; </p>
            </span>
        </section>

        <section class="reform" style="left: 50px; bottom: 30px;">
            <img width="300px" src="http://images.tate.org.uk/sites/default/files/styles/grid-normal-8-cols/public/images/markg_gerhardr_nicks.jpg?itok=D7g05qpV" alt="Selected Image" title="Image Title" /> 
            <span class="caption label"><span class="parenthesis">(</span>BOTTOM not working<span class="parenthesis">)</span></span>
            <span class="caption">
                <p>SETTING</p>
                <p> left: 50px; bottom: 30px; </p>
            </span>
        </section>

</aside>

<!-- RIGHT SIDE -->
<aside class="half right">

    <section class="reform" style="right: 10%; top: 40%;">
        <img width="300px" src="http://reform.lt/data/images/2014/09/d4991784x.jpg" alt="Selected Image" title="Image Title" /> 
        <span class="caption label"><span class="parenthesis">(</span>PERCENTAGE not working<span class="parenthesis">)</span></span>
        <span class="caption">
            <p>SETTING</p>
            <p> right: 10%; top: 40%; </p>
        </span>
    </section>

</aside>

CSS

    /* PRIMARY */

aside.half {
    position: relative;
    width: 50%;
    height: 100%;
    }

aside.half.left {
    float: left;
    background: #dbdbdb;
    }

aside.half.right {
    float: right;
    background: #b2b2b2;
    }

section.reform {
    display: block;
    position: absolute;
    text-align: center;
    }

section.reform img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1) brightness(0.9);
    -moz-filter: grayscale(1) brightness(0.9);
    -o-filter: grayscale(1) brightness(0.9);
    -ms-filter: grayscale(1) brightness(0.9);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    cursor: pointer;
    max-width: 100%;
    height: auto;
    }

section.reform:hover img {
    filter: grayscale(0.1) brightness(1);
    -webkit-filter: grayscale(0.1) brightness(1);
    -moz-filter: grayscale(0.1) brightness(1);
    -o-filter: grayscale(0.1) brightness(1);
    -ms-filter: grayscale(0.1) brightness(1);
    }

section.reform span.caption {
    display: none;
    position: absolute;
    text-align: center;
    padding-top: 25px;
    width: 100%;
    height: auto;
    }

section.reform:hover span.caption {
    display: block;
    }

section.reform span.caption p {
    font: 11px/15px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4d4d4d;
    margin: 0;
    padding: 0;
    }

section.reform span.caption p + p {
    color: #999999;
    }

section.reform span.caption.label {
    display: block;
    font-size: 23px;
    font-family:'Phenotype S', times;
    }

section.reform:hover span.caption.label {
    display: none;
    }

.parenthesis {
    font: 19px/0 'American Typewriter', 'Andale Mono', Courier New, Courier;
    font-weight: 100;
    display: inline-block;
    vertical-align: 2.9px;
    padding: 0 5px 0 7px;
    }


/* SECONDARY */

html {
    margin: 0;
    padding: 0;
    }
body {
    width: 100%;
    height: 100%;
    font: 100%;
    color: #212121;
    }

Answer 1

在 CSS 中添加这个

html, body{
  height:100%;
}

结果:http://jsfiddle.net/tdcwuu3r/