Как изменить положение div на дно?

Я использовал magnify zoom in из этого link.Как изменить положение div на дно?

Я хочу изменить положение div, которое показывает увеличенное изображение, я хочу, чтобы оно было показано в нижней части маленького изображения, потому что я использовал отзывчивый дизайн с бутстрапом и overflow-x:hidden в теле, а когда я сжимаю браузер, /. Может кто-нибудь мне помочь ? и извините за мой очень плохой английский

CSS:

div.jqZoomTitle 
{ 
z-index:5000; 
text-align:center; 
font-size:11px; 
font-family:Tahoma; 
height:16px; 
padding-top:2px; 
position:absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
color: #FFF; 
background: #999; 

} 

.jqZoomPup 
    { 
    overflow:hidden; 
    background-color: #FFF; 
    -moz-opacity:0.6; 
    opacity: 0.6; 
    filter: alpha(opacity = 60); 
    z-index:10; 
    border-color:#c4c4c4; 
    border-style: solid; 
    cursor:crosshair; 
    } 

    .jqZoomPup img 
    { 
    border: 0px; 
    } 

.preload{ 
-moz-opacity:0.8; 
opacity: 0.8; 
filter: alpha(opacity = 80); 
color: #333; 
font-size: 12px; 
font-family: Tahoma; 
text-decoration: none; 
border: 1px solid #CCC; 
background-color: white; 
padding: 8px; 
text-align:center; 
background-image: url(~/Images/zoomloader.gif); 
background-repeat: no-repeat; 
background-position: 43px 30px; 
width:90px; 
* width:100px; 
height:43px; 
*height:55px; 
z-index:10; 
position:absolute; 
top:3px; 
left:3px; 

} 

    .jqZoomWindow 
{ 
border: 1px solid #999; 
background-color: #FFF; 
}

Html:

<html> 
<head> 
<title>JQzoom Demo</title> 
<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script> 

<link rel="stylesheet" href="../css/jqzoom.css" type="text/css"> 
<style type"text/css"> 
    div.notes{ 
    font-size:12px; 
     } 
    div.notes a{ 
    color:#990000; 
    } 

    </style> 
    <script type="text/javascript"> 

    $(function() { 
      $(".jqzoom").jqzoom(); 
      }); 
     </script> 
     </head> 

    <body> 
    <div id="content" style="margin-top:100px;margin-left:100px;"> 
<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki"> 
    <img src="kawasakigreen_small.jpg" title="kawasakigreen" style="border: 1px solid #666;"> 
    </a>

источник

2015-12-03 Sarah xa

jqZoom имеет атрибуты позиционировать DIV.

положение Строка

По умолчанию: справа - всплывающее окно position.Admitted значения: 'право', 'левый', 'сверху', 'дно'

Для справки http://www.myjqueryplugins.com/jquery-plugin/jqzoom

источник

2015-12-03 04:45:37 Help

Спасибо, эта ссылка помогла мне разобраться в кодах –

. В этой статье говорится о добавлении опции «bottom», и я добавляю ее, но не работал:/ –

это потому что он имеет положение абсолютное. поэтому для достижения гибкой компоновки, которая является, когда устройство имеет меньшую ширину, то есть

@media(max-width: 768px){.jqZoomWindow{position:relative !important;}}

сделать его позиционным.

вот и все люди.

источник

2015-12-03 04:56:26 Reoxey

Спасибо, я добавил ваши коды, и это работает, но у меня есть нижний колонтитул в нижней части страницы и увеличенное изображение, показанное под нижним колонтитулом, я не очень хорошо в css, можете ли вы помочь мне. Как это исправить? Спасибо –

Положите css нижнего колонтитула в комментарии – Reoxey

Благодарю вас http://jsfiddle.net/rnz5rzxv/ –

Как изменить положение div на дно?

ответ

Смежные вопросы