Кнопка накладывается на различных разрешениях

Question

Я сделал кнопку, используя этот CSS код:

div {display: inline-block, 
    width: 120px, 
    height: 40px, 
    background-color: #2e6cd1, 
    line-height:39px, 
    vertical-align: text-middle, 
    text-align: center, 
    color: #ffffff, 
    font-family: Arial, 
    font-size: 20px, 
    font-weight: bold, 
    font-style: normal, 
    border-radius: 2px, 
    opacity: 0.9, 
    left: 160px, 
    top: 300px, 
    position: absolute}` 

Для моего разрешения (1366х768) она подходит идеально, но для других он перекрывает другой DIV или перемещает его в сторону. Как это исправить?

Answer 1

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