无法使用jquery删除CSS`position`属性

Question

I have few draggable items in separate containers. I need to remove container's position css property, when user starts dragging elements. This is my code:

$('#widget li').draggable({
   helper: 'clone',
   revert: 'invalid',
   start: function(){
     $('#widget').css({'position': ''});
   },
   drag: function(){
     $(this).css({'z-index':'1500'});
   }
});

It does not work, containers style does not change. How can I fix this? Here is the fiddle: https://jsfiddle.net/vaxobasilidze/wh6addd6/4/

 $('#deviceName li').draggable({ helper: 'clone', revert: 'invalid', start: function() { $('#deviceName').css({ 'position': '' }); }, drag: function() { $(this).css({ 'z-index': '1500' }); } }); $('#interface li').draggable({ helper: 'clone', revert: 'invalid', start: function() { $('#interface').css({ 'position': '' }); }, drag: function() { $(this).css({ 'z-index': '1500' }); } }); $('#display li').draggable({ helper: 'clone', revert: 'invalid', start: function() { $('#display').css({ 'position': '' }); }, drag: function() { $(this).css({ 'z-index': '1500' }); } }); $('#output li').draggable({ helper: 'clone', revert: 'invalid', start: function() { $('#output').css({ 'position': '' }); }, drag: function() { $(this).css({ 'z-index': '1500' }); } }); $('#streams li').draggable({ helper: 'clone', revert: 'invalid', start: function() { $('.draggableItems').css({ 'position': '' }); }, drag: function() { $(this).css({ 'z-index': '1500' }); } }); function foo() { $('.foo').each(function() { $(this).draggable({ //containment: $(this).parent(), stack: '.foo' }); }); } var fooCount = $('.foo').length; $('#mainDiv').droppable({ drop: function(event, ui) { if (!ui.draggable.hasClass('foo')) { var Class = ui.draggable.attr("class"); var title = ui.draggable.text().trim(); var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="' + (fooCount + 1) + '"><tr class="tableHeader"><th class="thClass"><button class="settings">set</button>' + title + '<span class="close">x</span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>'); $(this).append(item); fooCount += 1; foo(); } } }); 

 html { margin: 0; padding: 0; width: 100%; height: 100%; background: #2c2c2c; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313)); background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1); } body { margin: 0; padding: 0; width: 100%; height: 100%; color: #b8c0c8; background: rgba(0, 0, 0, 0.3); } #leftDiv { display: inline-block; width: 15%; height: 100%; border-right: 3px solid rgba(0, 0, 0, 0.2); box-sizing: border-box; float: left; margin: 0; padding: 0; overflow: auto; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33); } #deviceInfo { min-height: auto; border-bottom: 3px solid rgba(0, 0, 0, 0.2); padding: 3px; resize: vertical; overflow: auto; } #menu { padding: 0; margin: 0; margin-bottom: 5px; list-style-type: none; } #menu li { list-style: none; padding: 2px; border-radius: 4px; margin-top: 1px; } #menu li span { display: block; width: 100%; min-height: 20px; line-height: 20px; text-align: center; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); cursor: pointer; } #menu li ul { padding: 0; list-style-type: none; overflow: hidden; } #menu li ul li { width: 100%; max-width: 250px; text-align: center; min-height: 20px; line-height: 20px; margin: auto; border-bottom: 1px solid rgba(0, 0, 0, 0.3); cursor: move; } #menu li ul li:first-child { margin-top: 2px; border-top-left-radius: 4px; border-top-right-radius: 4px; } #menu li ul li:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; } #settingsDiv { margin: 0; width: 100%; min-height: 10px; box-sizing: border-box; margin: 0; padding: 3px; overflow: auto; } #mainDiv { display: inline-block; width: 85%; min-height: 100%; box-sizing: border-box; position: relative; float: left; margin: 0; overflow: auto; padding: 3px; } .foo { min-width: 250px; width: auto; text-align: center; min-height: 30px; border: 1px solid #515151; border-radius: 6px; position: absolute; padding: 0; overflow: hidden; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33); box-shadow: 5px 5px rgba(0, 0, 0, 0.1); } .thClass { display: block; min-width: 150px; width: 102%; margin-left: -3px; text-align: center; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); margin-top: -2px; min-height: 30px; line-height: 30px; font-size: 19px; cursor: move; } .header { margin-left: 17px; } .tableBody { display: block; min-height: 25px; text-align: center; width: 102%; margin-left: -2px; cursor: default; } .foo tbody tr td { display: block; line-height: 25px; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .devInfo { max-height: 150px; overflow-y: auto !important; } #deviceName { position: relative; } #interface { position: relative; } #display { position: relative; } #output { position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <body> <div id="leftDiv"> <div id="deviceInfo"> <ul id="menu"> <li>Device Name <ul id="deviceName"> <li> item 1 </li> </ul> </li> <li>Interface <ul id="interface"> <li> item 2 </li> </ul> </li> <li>Display <ul id="display"> <li> item 3 </li> </ul> </li> <li>Output <ul id="output"> <li> item 4 </li> </ul> </li> </ul> </div> <div id="settingsDiv"> </div> </div> <div id="mainDiv"> </div> 

Answer 1

The css function sets/clears inline styles. Unless your li elements have an inline position style, that code won't do anything to clear the position style.

If the elements are inheriting position or getting it from a style sheet, you can override that with an inline style by setting a new value ( absolute , static , etc.) via css , but not by setting it to '' .