절대 위치 지정을 사용하는 것이 나쁜 습관으로 간주됩니까?

절대 위치 지정을 사용하는 것이 나쁜 습관으로 간주됩니까?

---

나는 웹 페이지를 개발하고 있었는데, 그곳에서 체스와 같은 게임을위한 보드를 몇 개의 쟁반과 함께 레이아웃하고있었습니다. 모두 HTML을 사용하여 수행됩니다 (게임이 실행될 때 동적 업데이트를위한 jQuery 사용). 어딘가에서 페이지 내 요소의 절대 위치 지정을 사용하는 것은 나쁜 관행으로 간주되고 상대 위치 지정을 사용하는 것이 바람직하다는 개념을 얻었습니다.

너무 오랫동안 상대 위치 지정에 어려움을 겪은 후, 보드 요소의 절대 위치 지정이 훨씬 쉽고 정확하다는 것을 깨달았습니다.

상대 위치가 절대보다 바람직하다는 이유를 아는 사람이 있습니까? 취할 접근 방식을 결정할 때 적용하는 지침이나 경험 규칙이 있습니까?

---

개발중인 체스와 같은 게임의 경우 절대 위치 지정을 사용하는 데 본질적으로 잘못된 것은 없습니다. 당신이 말했듯이 상대적 위치와 정상적인 흐름 레이아웃은 이런 종류의 작업을 매우 어렵게 만듭니다.

물론 일부 공용 서비스를 제공하는 사이트와 같이보다 표준적인 웹 사이트를 개발하는 경우 절대 위치 지정이 브라우저의 기본 흐름 레이아웃을 재정의하므로 많은 사용자의 접근성이 떨어집니다. 이 경우 나는 그것을 피할 것입니다.

하지만, 절대 위치 지정의 덜 알려진 이점은 가장 가까운 "위치 지정"부모 요소 내 에서 국소 절대 위치 지정을 허용한다는 것 입니다.

참고 : "위치 지정"요소는 상대, 고정, 절대 또는 고정 중 하나 일 수 있습니다.

설명하기:

<div id="parentDIV" style="position:relative">
    <div id="childDIV" style="position:absolute:left:20px;top:20px;">
          I'm absolutely positioned within parentDIV.
    </div>
</div>

여기에, childDIV사실의 상단에서 왼쪽에서 20 픽셀과 20 픽셀을 위치 parentDIV, NOT 전체 문서. 이렇게하면 전체 페이지 흐름 레이아웃을 희생하지 않고도 페이지의 중첩 된 요소를 정확하게 제어 할 수 있습니다.

따라서 귀하의 질문에 답하기 위해 (절대적 위치보다 상대적 위치가 선호 됨) : 정답이 있다고 생각하지 않습니다. 무엇을 구축해야하는지에 따라 다릅니다. 그러나 일반적인 위치 (절대 또는 상대) 대 기본 흐름 레이아웃에서 내 접근 방식은 위에 설명 된 것과 같습니다.

---

또한 절대 위치 지정은 브라우저 창에 상대적인 위치를 지정하는 데 사용되는 것이 아니라 포함 된 요소 내에서 정확하게 위치를 지정하는데도 사용됩니다. 몇 년 동안 CSS를 사용한 후 마침내 이것을 이해했을 때 CSS를 효과적으로 사용하는 능력에 혁명을 일으켰습니다.

키는 절대 위치 소자가 갖는 제 선조 엘리먼트의 문맥에서 위치한다는 것이다 position:relative나 position:absolute. 따라서 이것이 있다면 :

div.Container
{
   position:relative
   width:300px;
   height:300px;
   background:yellow;
}

div.PositionMe
{
   position:absolute;
   top:10px;
   right:10px;
   width:20px;
   height:20px;
   background:red
}

과

<div class=Container>
...
   <div class=PositionMe>
   ...
   </div>
...
</div>

... div PositionMe는 Container페이지가 아닌 에 상대적으로 배치 됩니다.

이것은 페이지의 전반적인 유연성과 흐름을 희생하지 않고 특정 상황에서 정확한 배치를위한 모든 종류의 가능성을 열어줍니다.

---

질문에 대한 답은 아니지만 ...

게임 보드와 같은 체스의 경우 테이블을 사용할 수도 있다고 생각합니다.
결국 표시하는 것은 열과 행입니다.

이제 나는 많은 사람들이 '테이블을 사용하지 마십시오'와 '테이블은 악하다'고 외치기 시작한다는 것을 알고 있습니다. 그러나 테이블은 일부 유형의 데이터, 특히 열 / 행으로 구성된 데이터를 표시하는 데 여전히 유효한 도구입니다.

---

문제는 절대 위치 지정이 남용되기 쉽다는 것입니다. 좌표계는 일반인이 상자 모델보다 이해하기 훨씬 쉽습니다. 또한 Dreamweaver와 같은 프로그램을 사용하면 절대 위치 지정을 사용하여 페이지를 쉽게 레이아웃 할 수 있습니다 (사람들은 자신이 무엇을하는지 알지 못합니다).

However, for typical page layout, the default static positioning should be adequate and get the job done 90% of the time. It's very flexible, and by keeping everything in normal flow, elements are aware of the other elements around them, and will act according when things change. This is really good when dealing with dynamic content (which most pages are these days).

Using absolute positioning is far more rigid and makes it difficult to write layouts that respond well to changing content. They're simply too explicit. However, it is perfect if you're in need of freely moving elements around a page (drag/drop), need to overlay elements on top of each other, or other layout techniques that would benefit from working on a coordinate system. Frankly, a chessboard sounds like a fine reason to use it.

---

Look at your website in different browsers under the following conditions:

• Switch your OS settings to high-dpi/large fonts/high contrast (all change the size of the default browser font)
• Increase/decrease the default font size in the browser
• Override the page fonts in the browser (usually somewhere in the Accessibility options)
• Override/turn off the page stylesheet (granted, users shouldn't expect a chess game to work properly in this scenario :-))

In general absolute position is bad when you have inline elements with non-fixed size fonts. For your scenario it might work; however, there will be a lot of edge cases where something funky will go on.

---

Relative positioning is nice if you can pull a totally fluid layout because it will look reasonable on a large range of screen resolutions.

That being said, it's quite often to find (especially when trying for cross-browser compatability with older versions), that totally fluid layouts are hard to get right. Falling back on absolute positioning shouldn't be frowned upon, most mortal web developers do it all the time.

---

As long as you structure your HTML so that the elements follow a logical order that makes sense when rendered without CSS, there is no reason why using absolute positioning should be considered bad practice.

---

There are no hard and fast rules. The different forms of positioning are all good at different things.

The majority of work is usually best done with static positioning (it is the least fragile option), but absolute positioning is very good on occasion. Relative positioning, on the other hand, is something I've never used except for animation (on elements which are statically positioned until JavaScript gets involved), establishing a containing block for absolute positioning (so the element itself isn't moved at all), and (very very rarely) a one or two pixel nudge of an element.

---

Some things are impossible to do without position:absolute. Other things are WAY easier to achive with absolute positioning (let say that you want a bottom-right button for "read more" in a fixed/min height box and you don't have enough text in that box). So, my advice: just use the one that fits your needs...

---

It seems to me like I'm the only one here that totally disagree with the assumption that absolute posititioning is not a bad practice Except conditions like animation or elements that should specifically sit in an "unusual" place whitin their parents, absolute positioning break the structure of your HTML (which is exactly what HTML suppose to define in my opinion) because you can achieve results that differ the visuality from the structure very easily. Moreover, implementation of design is way harder and problematic with absolute because you need to measure every element and you have lot of place to mistake (against normal flow that is much easier and right for structure building of a website skeleton)

And finally, regarding the chess board, I believe that the hardest possible way to create it is using position absolute! Making the board with table would be much easier and right (after all this is a table)... And personally I would do it with a cube class that would have float: left (with clear on every ninth cube)

Absolute positioning of 64 different square is insane!

---

IMO, not a bad thing at all. I have recently completed an assignment with AA standards compliance and support for FF2, IE7, IE6 (yes, a pain I know). There were certain layouts which were only achievable because of absolutely positioning! Even certain components like buttons where layering was needed (transparencies) were possible only because of absolute positioning. If someone has a better way, please refer me to that.

Absolute positioning breaks the flow, if we know how to restrict the flow (change parent's coords to relative/absolute) it is fun. I don't know about older browsers (IE6 itself is a dinosaur) but one painful thing I found was, writing to PDF (Cute PDF) or opening with WINWORD (sue me) gives a shabby result.

---

Absolute positioning is a tool, like any tool, it can be used in good and bad ways. There is nothing wrong with it: StackOverflow probably uses it to display its alerts in the orange bar at the top of the site.

Now, in your situation, this is not bad either. But I think it would be much easier for you not to use it.

A chess board is a table, table cells don't need position tweaks. For events, onblur / onfocus and cie will do the job. Why would you even need pixels calculation?

So don't be stressed by the quality of your practice, but maybe you could check if you really need absolute positioning.

참고URL : https://stackoverflow.com/questions/186044/is-it-considered-bad-practice-to-use-absolute-positioning