Как «прикрепить» передвигаемый элемент к нижней части страницы?

Question

[Mehelborn]

Подскажите пожалуйста. Хочу прикрепить форму для отправки письма к нижней части страницы, нашла нужный код, но он адаптирован только под элемент который можно двигать по ВСЕЙ странице, а мне нужно только для нижней части, при смене position на fixed форма исчезает, при absolute все работает но не так как мне нужно.

<div id="handd">
			<div class="sendBlock">
				<button onclick="showhide('#sform')" style="border-radius: 10px 10px 0px 0px" class="btn btn-success">Написать нам письмо</button>
				<div id="sform" style="background-color: brown; padding: 20px">
					<form name="sform" action="send.php" method="post" onsubmit="return validateAndSubmit();">
						<input type="email" name="email" placeholder="Введите свой email" class="form-control"><br>
						<textarea name="message" placeholder="Текст" class="form-control" rows="10"></textarea><br>
						<button name="send" class="btn btn-success">Отправить</button>
					</form>
				</div>
			</div>
		</div>

#handd {
  position: fixed;
  z-index: 9;
}
.sendBlock {
  left: 53%;
  bottom: 0;
  width: 500px;
  cursor: move;
  z-index: 10;
}
#sform {
  display: none;
}

dragElement(document.getElementById("handd"));
function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }
  function dragMouseDown(e) {
    e = e || window.event;
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }
  function elementDrag(e) {
    e = e || window.event;
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = elmnt.offsetTop - pos2 + "px";
    elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
  }
  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

Answer 1

[Anton Semenov]

Что бы расположить с низу:

#handd {
  position: fixed;
  z-index: 9;
  bottom: 8px;
  left:8px;
}

Что бы двигался только по горизонтали

dragElement(document.getElementById("handd"));
function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }
  function dragMouseDown(e) {
    e = e || window.event;
    pos3 = e.clientX;
    //pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }
  function elementDrag(e) {
    e = e || window.event;
    pos1 = pos3 - e.clientX;
    //pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    //pos4 = e.clientY;
    //elmnt.style.top = elmnt.offsetTop - pos2 + "px";
    elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
  }
  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

Comments

[Mehelborn]

спасибо огромное