CSS перемещает родителя абсолютных детей, когда вы фокусируетесь

Question

У меня есть документ, подобный этому.

Когда происходит какое-либо действие в сети, поле ввода (id = bar, которое скрыто overflow:hidden) в конечном итоге сфокусировано моим кодом, и оно сдвигает весь мой родительский элемент, поэтому ни один из других элементов управления не отображается. Запустите скрипку внизу для примера.

HTML:

<div class="outer"> 
    <div class="parent"> 
    <div class="child" style="left: 10px; top: 10px; background:red;">Test1</div> 
    <div class="child" style="left: 10px; top: 52px">Test2<div> 
    <input class="child" id="bar" style="left: 30px; top: 10px">Test3</div> 
    </div> 
</div> 

CSS:

.outer { 
    width: 32px; 
    height: 32px; 
    overflow: hidden; 
} 

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
} 

JS:

setTimeout(function() { 
    document.getElementById('bar').focus(); 
}, 2000); 

Примечание: Я установить задержку на тайм-аут низкой. Возможно, вам придется обновить страницу, чтобы увидеть ее.

Fiddle:http://jsfiddle.net/qa28q48o/2/

Как я могу предотвратить это предпочтительно происходит на уровне CSS, без использования каких-либо JavaScript хаков на элемент, чтобы сбросить его свиток.

Answer 1

Контейнер прокручивается до сосредоточенного элемента, хотя он переполнен: скрыт. Таким образом, вы приводите, без скроллинга видящих только маленький мусор вашего контента ...

Возможные решения: 1. переполнения: видимый или переполнения: прокрутки на внешних 2. больше размеров для наружного

Просто дайте его немного больше свободы, плохой внешний ...

Answer 2

Я наткнулся на этот вопрос как хорошо, потребовалось некоторое время, прежде чем я понял, что происходит :)

Во всяком случае, я решил ее делать .blur() по ссылке что вызвало диалог, незадолго до того, как диалог был отменен Нед.

if (link.hasClass('confirm')) { 
    link.blur(); 
    $('#dialog-confirm').dialog({ 
     ...