CSS: установите обработчик изменения размера на переднем плане и измените размер

Question

У меня есть статья с верхним и нижним колонтитулом. В этой статье я использую resize:both для изменения размера объекта.
Если я установлю ширину нижнего колонтитула на ширину статьи, я больше не смогу получить «обработчик изменения размера браузера». Я тоже попробовал с z-index, но безрезультатно.

1. Возможно ли установить «обработчик изменения размера браузера» на передний план?
2. Могу ли я изменить размер «обработчика изменения размера браузера»?

HTML:

<article class="widget">
    <header class="widget-header"  draggable="true">
        <span>Title</span>
    </header>
    <section class="widget-content">
        <span>test test test test test test test test test 
            test test test test test test test test test 
            test test test test test test test test test 
            test test test test test </span>
    </section>
    <footer class="widget-footer">
        <span>Footer</span>
    </footer>
</article>

CSS:

.widget{
    position: absolute;
    margin: 4px;
    top:0;
    left:0;
    resize:both;
    overflow: auto;
    max-width: 400px;
    min-width: 200px;
    min-height: 150px;
    width: 300px;
    border: #000 2px solid;
    background-color: #999;
    /*.rounded-corners;*/
}

.widget-header {
    padding:2px 5px;
    background-color: #666;
    color: #CCC;
    /*.header-gradient;*/
}
.widget-content {
    position: absolute;
    top:20px;
    bottom:23px;
    border-top: #000 solid 2px;
    height:auto;
    padding:5px;
}
.widget-footer {
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding:2px 5px;

}

Пример Попробуйте получить обработчик изменения размера в примере ... Это невозможно.

Answer 1

Вы можете исправить это, добавив в нижний колонтитул свойство pointer-events: none;, которое будет указывать, что элемент никогда не будет целью событий мыши.

обновленная версия :

.widget-footer {
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding:2px 5px;

    /* New styles below: */

    pointer-events: none;
}

Что касается изменения отображения дескриптора изменения размера, этого нельзя сделать только в CSS.При использовании чего-то вроде пользовательского интерфейса jQuery для управления элементами изменения размера вы можете применить другой дескриптор, но дескриптор по умолчанию основывается на браузере и ОС и в настоящее время не может быть изменен.1014 * Недостаток этого метода заключается в том, что текст нижнего колонтитула можно выбрать только при выборе области до и после нижнего колонтитула.Чтобы обойти это, вы можете просто изменить свойство right нижнего колонтитула на ~ 10px, если вам не нужно иметь цвет фона / изображение, чтобы оно вообще не перекрывалось с ручкой изменения размера.

Answer 2

Вы также можете использовать это.

<article class="widget" style="min-width:200px;
min-height:80px;">

, затем извлеките минимальную ширину и минимальную высоту из файла CSS.

.widget{
position: absolute;
margin: 4px;
top:0;
left:0;
width:300px;
resize:both !important;
overflow: auto;

cursor:pointer;
border: #000 2px solid;
background-color: #999;
}