how to customize positions using html in DW?

how to customize positions using html in DW?

i'm making an application using DreamWaver by HTML, i'm making a new div
and positioned it using the DreamWaver design capabilities, but when
running it in the browser i found that the position had changed, it's in
the following figures:
*IN DW:
http://postimg.org/image/cvshkio0v/
*in browser(firefox & chrome):
http://postimg.org/image/85ve2097f/
and that's the code parts:
CSS
.buttonClass {
width: 320px;
height: auto;
text-align: center;
line-height: normal;
border-radius: 7px;
z-index: 3;
background-image: -webkit-linear-gradient(top,#FFF 0%,#91BDD6 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
background-image: -ms-linear-gradient(top,#FFF,#91BDD6);
background-image: -o-linear-gradient(top,#FFF,#91BDD6);
background-image: linear-gradient(top,#FFF,#91BDD6);
border: solid #91BDD6 5px;
box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
position: absolute;
left: 1014px;
top: 591px;
}
HTML
<div id="confirm" class="buttonClass">
<div align="center">Confirm</div>
</div>