отличия использования позиционирования и margin

#css #position #margin

С того момента, как я узнал о позиционировании в css, для меня является загадкой
разница между отступами с помощью margin(1) и top\right\bottom\left(2).

В моём представлении, эти два атрибута делают одно и то же, и единственное их различие,
которое смог найти - это то, что (1) относится к box-model, когда (2) - нет.

Так же знаю о применении (2) для "относительности сторон", т.е. вещи вроде:

top: 0;
left: 0;


И тогда он будет "прибит" к левому верхнему краю.

Вопрос состоит в том, когда какой инструмент использовать?
    

Ответы

Ответ 1

Чтобы понять разницу, вам нужно попробовать поставить больше одного элемента:



.m {
  margin: 10px;
}

.r {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  position: relative;
}

div { height: 30px; width: 30px; border: 1px solid #999; display: inline-block; }
body{ font-size: 0;}
span{ font-size:15px;}
без отсупов:




margin:




 top/left:









Вы видите в примере, что margin создает настоящий отступ вокруг каждого элемента,
сдвигая соседние. 

top/left же просто сдвигает элементы вниз и влево, никак не влияя на верстку. Теоретически,
top/left больше похож на transform: translate, с отличием в аппаратном ускорении и
относительных еденицах


Ответ 2

Я всегда рисовал себе правила - на листике:

margin (внешний отступ) | padding (внутренний отступ): ↑ → ↓ ←;

Хорошо запоминается.
Есть случаи, когда margin не сможет исправить ситуацию отступа от рамки и текст внутри
рамки, будет казаться прилипшим, на помощь придет padding, который сделает внутренний
отступ от рамки элемента.

Появление блока без сдвига нижних

#html #css #hover #position

Имеется следующая разметка:



.container {
  width: 200px;
}

.container .item {
  text-align: center;
  margin-bottom: 10px;
}

.container .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container .item .button {
  display: none;
}

.container .item:hover .title {
  white-space: normal;
}

.container .item:hover .button {
  display: block;
}

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  





https://jsfiddle.net/5cfwb5bu/

Задача: сделать так, чтобы по ховеру на .item отображался полный заголовок и кнопка,
но при этом нижестоящие блоки .item не должны сдвигаться вниз. 

Знаю про position: absolute, но не пойму как правильно применить.
    

Ответы

Ответ 1

Можно сделать так: т.к. кол-во изначально видимого контента известно, можно задать
блокам фиксированную высоту, а все его содержимое поместить в еще один контейнер -
таким образом по ховеру "новый" контент не будет двигать нижестоящие блоки. И никаких
position:absolute не нужно.



.container {
  width: 200px;
}

.container .item {
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  height: 2em;
}

.container .item .hover {
  background: #fff;
}

.container .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.container .item .button {
  display: none;
}

.container .item:hover {
  z-index: 1;
}

.container .item:hover .hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.container .item:hover .title {
  white-space: normal;
}

.container .item:hover .button {
  display: block;
}

  

    

      
Длинный длинный длинный заголовок товара
      
12345.67 USD
      

        Купить
      
    
  
  

    

      
Длинный длинный длинный заголовок товара
      
12345.67 USD
      

        Купить
      
    
  
  

    

      
Длинный длинный длинный заголовок товара
      
12345.67 USD
      

        Купить
      
    
  



Ответ 2

Можно сделать абсолютное позиционирование для item при hover и сдвигать нижний блок
на нужную высоту прошлого блока.



.container {
  width: 200px;
  /* для абсолютное позиционирование относительно данного контейнера */
  position: relative;
}

.container .item {
  text-align: center;
  margin-bottom: 10px;
}

.container .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container .item:hover {
  /* абсолютное позиционирование */
  position: absolute;
  /* просто для демонстрации */
  background-color: red;
}

/* сдвигаем нижний блок на нужное расстояние */
.container .item:hover + .item {
  padding-top: 60px;
}

.container .item .button {
  display: none;
}

.container .item:hover .title {
  white-space: normal;
}

.container .item:hover .button {
  display: block;
}

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  

Как узнать позицию курсора мыши относительно экрана?

Как узнать позицию курсора по координатам (X, Y) относительно экрана, не прибегая к средствам Windows.Forms?

Ответ

В WPF есть класс Mouse у которого есть метод GetPosition. Чтобы получить позицию курсора относительно экрана можно использовать метод PointToScreen
private void MainWindow_OnMouseMove(object sender, MouseEventArgs e) { var windowPosition = Mouse.GetPosition(this); var screenPosition = this.PointToScreen(windowPosition);
this.Title = string.Format("{0} --- {1}", windowPosition, screenPosition); }
Или как еще один вариант - использовать PInvoke

отличия использования позиционирования и margin

С того момента, как я узнал о позиционировании в css, для меня является загадкой разница между отступами с помощью margin(1) и top
ight\bottom\left(2).
В моём представлении, эти два атрибута делают одно и то же, и единственное их различие, которое смог найти - это то, что (1) относится к box-model, когда (2) - нет.
Так же знаю о применении (2) для "относительности сторон", т.е. вещи вроде:
top: 0; left: 0;
И тогда он будет "прибит" к левому верхнему краю.
Вопрос состоит в том, когда какой инструмент использовать?

Ответ

Чтобы понять разницу, вам нужно попробовать поставить больше одного элемента:
.m { margin: 10px; } .r { top: 10px; left: 10px; right: 10px; bottom: 10px; position: relative; } div { height: 30px; width: 30px; border: 1px solid #999; display: inline-block; } body{ font-size: 0;} span{ font-size:15px;}

---

без отсупов:

---

---

margin:

---

---

top/left:

---

---

Вы видите в примере, что margin создает настоящий отступ вокруг каждого элемента, сдвигая соседние.
top/left же просто сдвигает элементы вниз и влево, никак не влияя на верстку. Теоретически, top/left больше похож на transform: translate, с отличием в аппаратном ускорении и относительных еденицах