JQuery dynamic resizable/draggable - make elements ignore each other

Question

When "Create New Item" is clicked I want the elements to just appear at the same spot, not shifted down when other items exist. When items are dragged (use top-left corner) they don't affect each other - which is good. When items are deleted or resized they can affect the position of other elements. I want them not to affect each other.

var currentMaxItemNum = 0;
function putElemOnTop($elem) {
	maxZindex = 1000;
	$('.custom-item').each(function(){
		var zIndex = $(this).css('zIndex');
		if (zIndex != 'auto' && zIndex > maxZindex) {
			maxZindex = zIndex;
		}
	});
	if ($elem.css('zIndex') == 'auto' || $elem.css('zIndex') < maxZindex) {
		$elem.css('zIndex', parseInt(maxZindex) + 1);
	}
}
function createItem() {
	$elem = getItemElem();
	setupDragResize($elem);
	$('#container').append($elem);
}
function randomColor() {
	return Math.floor(Math.random()*16777215).toString(16);
}
function getItemElem() {
	currentMaxItemNum++;
	var $elem = $('<div item-num="'+currentMaxItemNum+'" class="custom-item" '
			+ 'style="background:#'+randomColor()+'">'
			+ '<span class="move">&harr;</span>'
			+ '<span class="delete">&#10007;</span>'
			+ '<span class="label">Item #'+currentMaxItemNum+'</span>'
			+ '</div>');
	return $elem;
}
function setupDragResize($elem) {
	$elem
		.draggable(
			{
				handle: ".move",
				containment: "#container",
				grid: [50, 50]
			}
		)
		.resizable(
			{
				containment: "#container",
				grid: 50
			}
		);
}
$(function(){
	$('#create-item').click(function(){
		createItem();
	});
	$(document).on('mousedown', '.custom-item', function(){
		putElemOnTop($(this));
	});
	$(document).on('click', '.delete', function(){
		if (confirm('Are you sure you want to delete this item?')) {
			$(this).closest('.custom-item').remove();
		}
	});	
});

#container { width: 300px; height: 450px; background:#eee;}
.custom-item { display:block; position:absolute; width: 100px; height: 100px;text-shadow:1px 1px 2px white;}
.custom-item, #container { padding: 0; margin: 0; }
.move {cursor: move;}
.delete {display:block;float:right;cursor:pointer;}
.label {text-align:center;display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button id="create-item">Create New Item</button>
<div id="container"></div>

Answer 1

I fixed the problems by adding "!important":

.custom-item { position:absolute !important; }

(and also putElemOnTop($elem) at the end of createItem() so the new items go on top)

var currentMaxItemNum = 0;
function putElemOnTop($elem) {
	maxZindex = 1000;
	$('.custom-item').each(function(){
		var zIndex = $(this).css('zIndex');
		if (zIndex != 'auto' && zIndex > maxZindex) {
			maxZindex = zIndex;
		}
	});
	if ($elem.css('zIndex') == 'auto' || $elem.css('zIndex') < maxZindex) {
		$elem.css('zIndex', parseInt(maxZindex) + 1);
	}
}
function createItem() {
	$elem = getItemElem();
	setupDragResize($elem);
	$('#container').append($elem);
	putElemOnTop($elem);
}
function randomColor() {
	return Math.floor(Math.random()*16777215).toString(16);
}
function getItemElem() {
	currentMaxItemNum++;
	var $elem = $('<div item-num="'+currentMaxItemNum+'" class="custom-item" '
			+ 'style="background:#'+randomColor()+'">'
			+ '<span class="move">&harr;</span>'
			+ '<span class="delete">&#10007;</span>'
			+ '<span class="label">Item #'+currentMaxItemNum+'</span>'
			+ '</div>');
	return $elem;
}
function setupDragResize($elem) {
	$elem
		.draggable(
			{
				handle: ".move",
				containment: "#container",
				grid: [50, 50]
			}
		)
		.resizable(
			{
				containment: "#container",
				grid: 50
			}
		);
}
$(function(){
	$('#create-item').click(function(){
		createItem();
	});
	$(document).on('mousedown', '.custom-item', function(){
		putElemOnTop($(this));
	});
	$(document).on('click', '.delete', function(){
		if (confirm('Are you sure you want to delete this item?')) {
			$(this).closest('.custom-item').remove();
		}
	});	
});

#container { width: 300px; height: 450px; background:#eee;}
.custom-item { display:block; position:absolute !important; width: 100px; height: 100px;text-shadow:1px 1px 2px white;}
.custom-item, #container { padding: 0; margin: 0; }
.move {cursor: move;}
.delete {display:block;float:right;cursor:pointer;}
.label {text-align:center;display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button id="create-item">Create New Item</button>
<div id="container"></div>