I have a div (with shadow) which can be moved
It has a form on it and am clueless on how to bring it to the forefront so I can enter text
The form is absolutely positioned and has a z-index of 8
<div class="alert alert-light shadow" role="alert" id="drag" style="position:absolute; z-index:8; right:0; width:25%">
</div>
Is this something that can be fixed with CSS?
wake689
2
I think we need to see the HTML and the rest of the CSS.
2 Likes
ok, heres the div
<div class="alert alert-light shadow" role="alert" id="drag" style="position:absolute; z-index:8; right:0; width:25%">
<h2 class='mb-3 text-dark'><span class='icon-move'></span></h2>
<form action="add_row_engine.php" method="POST">
<div class="row mb-3">
<div class="col">
<label for="label">Label</label>
<input type="text" class="form-control" maxlength="2" id="label" name="label" required>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="Notes">Notes (Optional)</label>
<textarea type="text" class="form-control" id="Notes" name="Notes"></textarea>
</div>
</div>
<div class="row mb-3">
<div class="col">
<button class="btn btn-outline-dark btn-block btn-lg" type="submit">
<span class="icon-ok"></span> Submit</button>
</div>
</div>
<input type="hidden" name="width" value="18">
<input type="hidden" name="height" value="28">
<input type="hidden" name="rotate" id="rotate" value="No">
<input type="hidden" name="x_coord" id="x_coord">
<input type="hidden" name="y_coord" id="y_coord">
<input type="hidden" name="bays" value="1">
<input type="hidden" name="room_id" value="3">
</form>
</div>
Obvious question (which we can’t answer without seeing the rest of your HTML and CSS) - do any elements have a z-index greater than 8?
2 Likes
PaulOB
5
Does this happen in all browsers or is it related to this old Firefox bug?
We can only offer real help if we can test a working demo. 
1 Like
system
Closed
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.