How to overlap other elements using resizable element?


Tags: javascript,jquery,css,jquery-ui-resizable

Problem :

How do I keep a resizable div from being overlapped by neighboring elements? I changed the z-index of the resizable div to have 1, and the rest 0.

This example will make it clear right away: http://jsfiddle.net/gALUP/1/

HTML

<div id='grid'>
    <div class='outline'>
        <div class='container resizable'>
        </div>    
    </div>
    <div class='outline'>
        <div class='container'>
        </div>    
    </div>
</div>

CSS

.outline { 
    height: 200px;
    width: 200px;
    border: 1px solid black; 
    position: relative; 
    z-index: 0; 
    display: inline-block;
}
.container { 
    height: 100%; 
    width: 100%; 
    background-color: #ff0000;
}

.resizable { 
    background-color: #0000ff; 
    position: absolute; 
    z-index: 1; 
}


Solution :

Remove z-index: 0 from .outline:

.outline {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    position: relative;
    display: inline-block;
}
.container {
    height: 100%;
    width: 100%;
    background-color: #ff0000;
}
.resizable {
    background-color: #0000ff;
    position: absolute;
    z-index: 1;
}

http://jsfiddle.net/elclanrs/gALUP/2/


    CSS Howto..

    How to select first a element of li with CSS?

    how to change the css of default select2 placeholder color?

    How can I get jQuery to toggle a class with fadeToggle?

    How to place text/content below Navbar in CSS/HTML

    CSS: how to style on character height versus line height

    How to put the table inside the box

    How to use overflow-y:auto with child with bottom: 0 and position:absolute?

    How to reference css and script files into a node.js app?

    How to toggle ng-class

    How to show borders of th elements with gradient fills in IE9?

    JavaScript: How to clear my custom keyboard mappings and use the default ones

    How to understand this CSS inheritance (or override, selection)

    How to get body content to center on page using CSS

    How to create circles around a circle with css, javascript?

    CSS div border shows up, but is transparent

    Jquery Mobile — how to Override Height and width of select box.

    How to separate header from content

    How to change the color of each instance of a word in an html table with css?

    How to display 'fit' image in CSS or HTML?

    How can I get rid of those animation in jquery toggle?

    How to CSS style a radius border

    How to style an input that is a type=“button”?

    How to apply CSS after adding elemnts with jquery

    How Do I Add product descriptions (short) to hover box in woocommerce?

    How to align an icon to the right of content

    How to style
  • s inside
      as a table with custom height?
  • How can I get my coloured Bootstrap popover to render properly?

    In CSS, how to compute the percentage height within a `height:auto` parent?

    How to add spacing between two rows of multiple divs each

    How to have multiple css print layouts on a single page application?