将图像定位在滑块底部

Question

我试图在旋转图像顶部的滑块底部放置一个边框图像，但我似乎无法正确定位。我希望边框过渡到页面的其余部分，如果我将边框添加到图像本身，它看起来很奇怪，因为它在旋转。

这是我的 jsfiddle。

CSS代码：

  #wowslider-container1 { 
    zoom: 1; 
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    max-width: auto;
    max-height:640px;
    font-size: 10px;

    /* reset box-sizing (to boostrap friendly) */
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; 
}
* html #wowslider-container1{ width:2220px }
#wowslider-container1 .ws_images ul{
    position:relative;
    width: 10000%; 
    height:100%;
    left:0px;
    top: 0px;
    list-style:none;
    margin:0;
    padding:0;
    border-spacing:0;
    overflow: hidden;
    /*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
    position: relative;
    width:1%;
    height:100%;
    line-height:0; /*opera*/
    overflow: hidden;
    top: 0px;
    left: 0px;
    float:left;
    /*font-size:0;*/
    padding:0 0 0 0 !important;
    margin:0 0 0 0 !important;
}

.wowslider-container1 img {
    position: absolute;
    left: 0;
    bottom: 0;
}

#wowslider-container1 .ws_images{
    position: relative;
    left:0;
    top:0;
    height:100%;
    max-height:640px;
    max-width: auto;
    vertical-align: top;
    border:none;
    overflow: hidden;
}
#wowslider-container1 .ws_images ul a{
    width:100%;
    height:100%;
    max-height:640px;
    display:none;
}
#wowslider-container1 img{
    max-width: none !important;
}
#wowslider-container1 .ws_images .ws_list img,
#wowslider-container1 .ws_images > div > img{
    width:100%;
    border:none 0;
    max-width: none;
    padding:0;
    margin:0;
}
#wowslider-container1 .ws_images > div > img {
    max-height:640px;
}

#wowslider-container1 .ws_images iframe {
    position: absolute;
    z-index: -1;
}

#wowslider-container1 .ws-title > div {
    display: inline-block !important;
}

#wowslider-container1 a{ 
    text-decoration: none; 
    outline: none; 
    border: none; 
}

#wowslider-container1  .ws_bullets { 
    float: left;
    position:absolute;
    z-index:70;
}
#wowslider-container1  .ws_bullets div{
    position:relative;
    float:left;
    font-size: 0px;
}
/* compatibility with Joomla styles */
#wowslider-container1  .ws_bullets a {
    line-height: 0;
}

#wowslider-container1  .ws_script{
    display:none;
}
#wowslider-container1 sound, 
#wowslider-container1 object{
    position:absolute;
}

/* prevent some of users reset styles */
#wowslider-container1 .ws_effect {
    position: static;
    width: 100%;
    height: 100%;
}

/* Navigation arrows for preview mode */
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev{
    position:absolute;
    top:50%;
    width:3.6em;
    height:3.6em;
    margin:-2.8em 0 0 0;
    z-index:60;
    cursor:pointer;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    opacity:0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); 
}
#wowslider-container1 a.ws_next{
    right:2%;
    background: url(../img/slideshow/next1.png) no-repeat 50% 50%;
    background-size: 100%;
    cursor:pointer;
}
#wowslider-container1 a.ws_prev{
    left:2%;
    background: url(../img/slideshow/prev1.png) no-repeat 50% 50%;
    background-size: 100%;
    cursor:pointer;
}
#wowslider-container1 a.ws_next:hover, #wowslider-container1 a.ws_prev:hover{
    opacity:0.9;
        -webkit-transform: scale(1.1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);   
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
}
#wowslider-container1 .ws_bullets a {
    position:relative;
    background:url("../img/slideshow/bullet.png") no-repeat scroll 0 0 transparent;
    border:0 none;
    float:left;
    cursor:pointer;
    height:10px;
    margin-right:4px;
    text-indent:-9999px;
    width:10px;
    z-index:100;
    outline:none;
    color:transparent;
}
#wowslider-container1 a.ws_selbull,#wowslider-container1 a.ws_overbull,#wowslider-container1 .ws_bullets a:hover{
    background-position:100% 0;
}

/* bottom center */
#wowslider-container1  .ws_bullets {
    bottom:20px;
    left:50%;
}
#wowslider-container1  .ws_bullets div{
    left:-50%;


}
#wowslider-container1 .ws-title div{
display:none;
    font-size: 0.857em;
    margin-top:0.25em;
}#wowslider-container1 .ws_images > ul{
    animation: wsBasic 20s infinite;
    -moz-animation: wsBasic 20s infinite;
    -webkit-animation: wsBasic 20s infinite;
}
@keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }
@-moz-keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }

#wowslider-container1 .ws_bullets  a img{
    text-indent:0;
    display:none;
    bottom:10px;
    left:-72px;
    visibility:hidden;
    position:absolute;
    -moz-box-shadow: 0 0 5px #999999;
    box-shadow: 0 0 5px #999999;
    max-width:none;
}

#wowslider-container1 .ws_bulframe div div{
    display: none;
}
#wowslider-container1 .ws_bulframe div {
display: none;
}
#wowslider-container1  .ws_bullets .ws_bulframe{
display: none;
}
#wowslider-container1 .ws_bulframe span{
    display: none;
}#wowslider-container1 .ws_bulframe div div{
    height: auto;
}

@media all and (max-width:760px) {
    #wowslider-container1 .ws_fullscreen {
        display: block;
    }
}
@media all and (max-width:400px){
    #wowslider-container1 .ws_controls,
    #wowslider-container1 .ws_bullets,
    #wowslider-container1 .ws_thumbs{
        display: none
    }

    /*/
BORDER UP
    /*/
#borderup {
  position: absolute;
  bottom: 0px; 
    }

HTML:

 <!-- Start slider image section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1" title=""/></li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan" title=""</li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby" title=""/></li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1" title=""/></li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking" title=""/></li>
    </div> </ul>
    <div class="ws_bullets"><div>
        <a href="#" title="shakespeare1"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1"/>2</span></a>
        <a href="#" title="horror"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan"/>3</span></a>
        <a href="#" title="gatsby"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby"/>4</span></a>
        <a href="#" title="hemingway"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1"/>5</span></a>
      <a href="#" title="punk"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking"/>5</span></a>
    </div></div>
       </div>
       </div>       

     <div class="borderup"><img src="http://englishclass.dk/_themes/englishclass/img/border-up.png"/></div>

        <!-- End slider image section -->

Answer 1

您的 html 和 css 标签有一些错误。尝试编写美容代码以减少错误。在 css 和 html 区域的 js fiddler 中查看您的红点可以帮助您找到问题。

我修复了你的代码，你可以看到它：

#wowslider-container1 {
 zoom: 1;
 position: relative;
 top: 0px;
 left: 0px;
 width: 100%;
 max-width: auto;
 max-height: 640px;
 font-size: 10px;
 /* reset box-sizing (to boostrap friendly) */
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
}

* html #wowslider-container1 {
 width: 2220px
}

#wowslider-container1 .ws_images ul {
 position: relative;
 width: 10000%;
 height: 100%;
 left: 0px;
 top: 0px;
 list-style: none;
 margin: 0;
 padding: 0;
 border-spacing: 0;
 overflow: hidden;
 /*table-layout:fixed;
    */
}

#wowslider-container1 .ws_images ul li {
 position: relative;
 width: 1%;
 height: 100%;
 line-height: 0;
 /*opera*/
 overflow: hidden;
 top: 0px;
 left: 0px;
 float: left;
 /*font-size:0;
    */
 padding: 0 0 0 0 !important;
 margin: 0 0 0 0 !important;
}

.wowslider-container1 img {
 position: absolute;
 left: 0;
 bottom: 0;
}

#wowslider-container1 .ws_images {
 position: relative;
 left: 0;
 top: 0;
 height: 100%;
 max-height: 640px;
 max-width: auto;
 vertical-align: top;
 border: none;
 overflow: hidden;
}

#wowslider-container1 .ws_images ul a {
 width: 100%;
 height: 100%;
 max-height: 640px;
 display: none;
}

#wowslider-container1 img {
 max-width: none !important;
}

#wowslider-container1 .ws_images .ws_list img,
#wowslider-container1 .ws_images>div>img {
 width: 100%;
 border: none 0;
 max-width: none;
 padding: 0;
 margin: 0;
}

#wowslider-container1 .ws_images>div>img {
 max-height: 640px;
}

#wowslider-container1 .ws_images iframe {
 position: absolute;
 z-index: -1;
}

#wowslider-container1 .ws-title>div {
 display: inline-block !important;
}

#wowslider-container1 a {
 text-decoration: none;
 outline: none;
 border: none;
}

#wowslider-container1 .ws_bullets {
 float: left;
 position: absolute;
 z-index: 70;
}

#wowslider-container1 .ws_bullets div {
 position: relative;
 float: left;
 font-size: 0px;
}


/* compatibility with Joomla styles */

#wowslider-container1 .ws_bullets a {
 line-height: 0;
}

#wowslider-container1 .ws_script {
 display: none;
}

#wowslider-container1 sound,
#wowslider-container1 object {
 position: absolute;
}


/* prevent some of users reset styles */

#wowslider-container1 .ws_effect {
 position: static;
 width: 100%;
 height: 100%;
}


/* Navigation arrows for preview mode */

#wowslider-container1 a.ws_next,
#wowslider-container1 a.ws_prev {
 position: absolute;
 top: 50%;
 width: 3.6em;
 height: 3.6em;
 margin: -2.8em 0 0 0;
 z-index: 60;
 cursor: pointer;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 opacity: 0.6;
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

#wowslider-container1 a.ws_next {
 right: 2%;
 background: url(../img/slideshow/next1.png) no-repeat 50% 50%;
 background-size: 100%;
 cursor: pointer;
}

#wowslider-container1 a.ws_prev {
 left: 2%;
 background: url(../img/slideshow/prev1.png) no-repeat 50% 50%;
 background-size: 100%;
 cursor: pointer;
}

#wowslider-container1 a.ws_next:hover,
#wowslider-container1 a.ws_prev:hover {
 opacity: 0.9;
 -webkit-transform: scale(1.1);
 -ms-transition: all 200ms ease-in;
 -ms-transform: scale(1.1);
 -moz-transition: all 200ms ease-in;
 -moz-transform: scale(1.1);
 transition: all 200ms ease-in;
 transform: scale(1.1);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

#wowslider-container1 .ws_bullets a {
 position: relative;
 background: url("../img/slideshow/bullet.png") no-repeat scroll 0 0 transparent;
 border: 0 none;
 float: left;
 cursor: pointer;
 height: 10px;
 margin-right: 4px;
 text-indent: -9999px;
 width: 10px;
 z-index: 100;
 outline: none;
 color: transparent;
}

#wowslider-container1 a.ws_selbull,
#wowslider-container1 a.ws_overbull,
#wowslider-container1 .ws_bullets a:hover {
 background-position: 100% 0;
}


/* bottom center */

#wowslider-container1 .ws_bullets {
 bottom: 20px;
 left: 50%;
}

#wowslider-container1 .ws_bullets div {
 left: -50%;
}

#wowslider-container1 .ws-title div {
 display: none;
 font-size: 0.857em;
 margin-top: 0.25em;
}

#wowslider-container1 .ws_images>ul {
 animation: wsBasic 20s infinite;
 -moz-animation: wsBasic 20s infinite;
 -webkit-animation: wsBasic 20s infinite;
}

@keyframes wsBasic {
 0% {
  left: -0%
 }
 10% {
  left: -0%
 }
 20% {
  left: -100%
 }
 30% {
  left: -100%
 }
 40% {
  left: -200%
 }
 50% {
  left: -200%
 }
 60% {
  left: -300%
 }
 70% {
  left: -300%
 }
 80% {
  left: -400%
 }
 90% {
  left: -400%
 }
}

@-moz-keyframes wsBasic {
 0% {
  left: -0%
 }
 10% {
  left: -0%
 }
 20% {
  left: -100%
 }
 30% {
  left: -100%
 }
 40% {
  left: -200%
 }
 50% {
  left: -200%
 }
 60% {
  left: -300%
 }
 70% {
  left: -300%
 }
 80% {
  left: -400%
 }
 90% {
  left: -400%
 }
}

@-webkit-keyframes wsBasic {
 0% {
  left: -0%
 }
 10% {
  left: -0%
 }
 20% {
  left: -100%
 }
 30% {
  left: -100%
 }
 40% {
  left: -200%
 }
 50% {
  left: -200%
 }
 60% {
  left: -300%
 }
 70% {
  left: -300%
 }
 80% {
  left: -400%
 }
 90% {
  left: -400%
 }
}

#wowslider-container1 .ws_bullets a img {
 text-indent: 0;
 display: none;
 bottom: 10px;
 left: -72px;
 visibility: hidden;
 position: absolute;
 -moz-box-shadow: 0 0 5px #999999;
 box-shadow: 0 0 5px #999999;
 max-width: none;
}

#wowslider-container1 .ws_bulframe div div {
 display: none;
}

#wowslider-container1 .ws_bulframe div {
 display: none;
}

#wowslider-container1 .ws_bullets .ws_bulframe {
 display: none;
}

#wowslider-container1 .ws_bulframe span {
 display: none;
}

#wowslider-container1 .ws_bulframe div div {
 height: auto;
}

@media all and (max-width:760px) {
 #wowslider-container1 .ws_fullscreen {
  display: block;
 }
}

@media all and (max-width:400px) {
 #wowslider-container1 .ws_controls,
 #wowslider-container1 .ws_bullets,
 #wowslider-container1 .ws_thumbs {
  display: none
 }
}


/*/
 BORDER UP 
/*/

.borderup {
 position: absolute;
 bottom: -3px;
 width: 100%;
}

<div id="wowslider-container1">
    <div class="ws_images">
        <ul>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1" title="" /></li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan" title="" /> </li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby" title="" /></li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1" title="" /></li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking" title="" /></li>
        </ul>
    </div>

    <div class="ws_bullets">
        <div>
            <a href="#" title="shakespeare1"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1"/>2</span></a>
            <a href="#" title="horror"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan"/>3</span></a>
            <a href="#" title="gatsby"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby"/>4</span></a>
            <a href="#" title="hemingway"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1"/>5</span></a>
            <a href="#" title="punk"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking"/>5</span></a>
        </div>
    </div>
    <div class="borderup">
      <img src="http://englishclass.dk/_themes/englishclass/img/border-up.png" />
    </div>
</div>

将图像定位在滑块底部

Positioning image at the bottom of slider

css

positioning

image