Share This
//Absolute, Relative, Fixed Positioning: How Do They Differ?

Absolute, Relative, Fixed Positioning: How Do They Differ?

Short answer: Yes, there is one more, “static”, which is the default. Yes, they majorly differ. Each of them is incredibily useful and which you should use of course depends on the desired result. Also, don’t forget about float, which is an important part of positioning.

Medium answer: I’m not going to do a “long answer” because there is no need to rewrite what has been written many times before, but I will do a “medium answer” here were we can quickly run through each type. I also sometime refer people to this10 step tutorial, which does a pretty good job of explaining it.

An important concept to understand first is that every single element on a web page is a block. Literally a rectangle of pixels. This is easy to understand when when you set the element to display: block; or if that element is by default display: block; This means you can set a width and a height and that element will respect that. But elements that are display: inline, like a span by default, are also rectangles, they just flow onto the page different, lining up horizontally as they can.

Now that you are picturing every single page element as a block of pixels, we can talk about how positioning is used to get the blocks of pixels exactly where you want them to go. We’re going to leave off any discussion of the box model, but that factors into this as well…

  • Static. This is the default for every single page element. Different elements don’t have different default values for positioning, they all start out as static. Static doesn’t mean much, it just means that the element will flow into the page as it normally would. The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn’t cascade.
  • Relative. This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it’s position 10 pixels DOWN from where it would NORMALLY be. I’m sure you can imagine, the ability to shift an element around based on it’s regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn’t really work with statically positioned elements. Even if you don’t set a z-index value, this element will now appear on top of any other statically positioned element. You can’t fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. This brings up some powerful opportunities which I talk about here.
  • Absolute. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning. It’s overuse or improper use can limit the flexibility of your site.
  • Fixed. This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled, creating an effect a bit like the old school “frames” days. Take a look at this site (update: dead link, sorry), where the left sidebar is fixed. This site is a perfect example for since it exhibits both good and bad traits of fixed positioning. The good is that it keeps the navigation present at all times on the page and it creates and interested effect on the page. The bad is that there are some usability concerns. On my smallish laptop, the content in the sidebar is cut off and there is no way from me to scroll down to see the rest of that content. Also if I scroll all the way down to the footer, it overlaps the footer content not allowing me to see all of that. Cool effect, can be useful, but needs to be thoroughly tested.

Credit: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/


ỨNG TUYỂN






    Leave a Reply

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    Chế độ phúc lợi

    CHÍNH SÁCH LƯƠNG & THƯỞNG

    Thấu hiểu tâm tư nguyện vọng của nhân viên, công ty Rivercrane Việt Nam đặc biệt thiết lập chế độ xét tăng lương định kỳ 2lần/năm. Xét đánh giá vào tháng 06 và tháng 12 hàng năm và thay đổi lương vào tháng 01 và tháng 07 hàng năm. Ngoài ra, nhân viên còn được thưởng thành tích định kỳ cho các cá nhân xuất sắc trong tháng, năm.

    CHẾ ĐỘ ĐÀO TẠO TẠI NHẬT

    Luôn luôn mong muốn các kỹ sư và nhân viên trong công ty có cái nhìn toàn diện về lập trình những mảng kỹ thuật trên thế giới, công ty Rivercrane Việt Nam quyết định chế độ 3 tháng 1 lần đưa nhân viên đi học tập tại Nhật. Các bạn kỹ sư hoàn toàn đều có thể quyết định khả năng phát triển bản thân theo hướng kỹ thuật hoặc theo hướng quản lý.

    CHẾ ĐỘ ĐI DU LỊCH HÀNG NĂM

    Không chỉ đưa đến cho nhân viên những công việc thử thách thể hiện bản thân, công ty Rivercrane Việt Nam muốn nhân viên luôn thích thú khi đến với những chuyến hành trình thú vị hàng năm. Những buổi tiệc Gala Dinner sôi động cùng với những trò chơi Team Building vui nhộn sẽ giúp cho đại gia đình Rivercrane thân thiết hơn.

    CHẾ ĐỘ EVENT CÔNG TY

    Những hoạt động Team building, Company Building, Family Building, Summer Holiday, Mid-Autumn Festival… sẽ là những khoảnh khắc gắn kết đáng nhớ của mỗi một nhân viên trong từng dự án, hoặc sẽ là những điều tự hào khi giới thiệu công ty mình với với gia đình thân thương, cùng nhau chia sẻ yêu thương với thông điệp “We are One”

    BẢO HIỂM

    Công ty Rivercrane Việt Nam đảm bảo tham gia đầy đủ chế độ Bảo hiểm xã hội, bảo hiểm y tế và bảo hiểm thất nghiệp. Cam kết chặt chẽ về mọi thủ tục phát sinh công ty đều hỗ trợ và tiến hành cho nhân viên từ đầu đến cuối. Những chế độ bảo hiểm khác công ty cũng đặc biệt quan tâm và từng bước tiến hành.

    CHẾ ĐỘ PHÚC LỢI KHÁC

    Hỗ trợ kinh phí cho các hoạt động văn hóa, văn nghệ, thể thao; Hỗ trợ kinh phí cho việc mua sách nghiên cứu kỹ thuật; Hỗ trợ kinh phí thi cử bằng cấp kỹ sư, bằng cấp dành cho ngôn ngữ. Hỗ trợ kinh phí tham gia các lớp học về quản lý kỹ thuật bên ngoài; Các hỗ trợ phúc lợi khác theo quy định công ty…

    HAPPY SSC OFFICE’S 4TH ANNIVERSARY

    Vừa qua, tại ngôi nhà chung thứ 2 - văn phòng SSC, tất cả các thành viên của đại gia đình RCVN đã có một buổi tiệc nho nhỏ đầm ấm để chúc mừng sinh nhật lần thứ 4 của văn phòng SSC.

    Bốn năm đi qua biết bao đợi chờ
    SSC lớn nhanh như ngôi nhà ta mơ ước
    Thuở ban sơ khó khăn hoài đối mặt

    Quyết một lòng dẫn dắt tới thành công.

    Bài hát chúc mừng sinh nhật đã vang lên, mọi người cùng nhau hát, cùng nhau thổi nến mừng văn phòng SSC tròn 4 tuổi.

    Hòa mình vào không khí chào đón sinh nhật SSC, bên cạnh đó RCVN còn tổ chức cho mọi người trò chơi thường niên, mà tất cả thành viên đại gia đình RCVN không ai là không biết đến đó là giải đấu bi lắc.

    Giải thưởng năm nay khá ấn tượng, với chiếc cúp và những chiếc huy chương biểu tượng cho sự chiến thắng đang đợi chủ nhân của nó, với khẩu hiệu “Làm hết sức, chơi hết mình”, các chiến binh nhà RCVN hừng hực khí thế để chiến đấu, để giật ngay cho mình giải thưởng cao nhất.

    Dzô dzô dzô…! Những cổ động viên cổ vũ cho các đội chơi cứ phải gọi là nhiệt tình, không thua những pha cổ vũ cuồng nhiệt các đội tuyển bóng đá Việt Nam


    Và phần mong chờ nhất cũng đã đến đó chính là “NHẬP TIỆC” thôi cả nhà ơi!
    “Hai ba zô, hai ba uống, uống thế nào, uống hếttttt”
    Đọc đến đây mọi người cũng đã phần nào đoán ra khung cảnh lúc này của nhà RCVN đúng không, chúng ta cùng xem lại những khoảnh khắc “cháy hết mình” của nhà mình nhé! 

    Chưa hết đâu, những tưởng mạnh mẽ tứ phương hai ba zô lại của mấy anh có thể khuất phục được hội chị em RCVN dễ đến thế à, không đâu nhé. Hội chị em chúng tớ cũng rất ra gì đấy nhé mấy anh ơi!

    Sau thời gian “nạp năng lượng” mọi người ngồi xuống, quây quần bên nhau, lắng nghe tiếng hát của các thành viên, dưới “ánh đèn sân khấu” ca sĩ nhà RCVN mình thật lung linh, tỏa sáng!

    Và lời kết, xin gửi lời tri ân sâu sắc đến nỗ lực và đóng góp của tất cả thành viên trong đại gia đình RCVN. Chúc cho đại gia đình RCVN sẽ luôn đoàn kết, thống nhất, không ngừng cải tiến và ngày một phát triển phát triển.

    © 2012 RiverCrane Vietnam. All rights reserved.

    Close