I attempted to position an absolute element with a negative value, and it works perfectly in every browser except for Firefox. In Chrome, IE, or Safari, the blue handler box is correctly positioned in the middle of the top border. Is there a workaround to resolve this issue specifically for Firefox?
Any assistance would be greatly appreciated.
body {
padding-top: 10em
}
[draggable] {
outline: 1px dashed #0099FF;
cursor: move;
position: relative
}
.handler {
width: 34px;
height: 16px;
background-color: #0099FF;
margin: 0 auto;
position: absolute;
top: -8px;
left: 0;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services">
<div class="container">
<div class="row">
<div draggable="true" class="parent col-lg-12 text-center">
<h2 class="section-heading">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<div class="handler"></div>
</div>
</div>
</div>
</section>