开发者

position: Absolute ( or fixed ) layout vs normal layout

开发者 https://www.devze.com 2023-03-13 09:42 出处:网络
I have a strange question I always wanted to ask. I was wondering of the advantage/disadvantage to have a div layout with only position:absolute rather than a traditional one.

I have a strange question I always wanted to ask.

I was wondering of the advantage/disadvantage to have a div layout with only position:absolute rather than a traditional one.

I looks simpler to code and you can achieve the the same results ( if all divs are aligned p开发者_开发知识库roperly ).

Why would you prefer to use a traditional layout?

Thank you very much for your help.


This question is pretty subjective. Nonetheless, here's my two cents.

Positioned Layout

  • Pro: Arguably more intuitive code.
  • Con: Everything is outside of the normal document flow. Making segments of the page that are dynamic, i.e. content, very difficult to position around.

Normal Layout

  • Pro: Just the opposite - document follows normal flow. Making it easier and requiring less code for a majority of your layout.
  • Con: Typically you have to mess with float, margin, or position to achieve segments like a sidebar.

In the end, I typically develop a normal layout as my base. I save the positioned items for things that will never move, i.e. a top right navigation, temporary UI elements, etc.


@louis; From my point of view use position:absolute; for a hole layout is not good. there are several reasons.

1)absolute position div not consider height & width which when means you resize your page then the elements are overlapping each other. Which mesh the page.

2)suppose you have vertical divs with same class like panel . Then if you give them

.panel{
position:absolute;
top:20px;
}

then what happens all divs take top:20px; from top of page & overlapping each other. Absolute position made everything is outside of the normal flow of layout.

for more check this link

Is it considered bad practice to use absolute positioning?

0

精彩评论

暂无评论...
验证码 换一张
取 消