Di chuyển hình ảnh lên css

Thuộc tính định vị trí xác định vị trí tương đối và tuyệt đối cho thành phần, vị trí này phụ thuộc vào giá trị khai báo của thành phần và thành phần bao bên ngoài nó

Vị trí này ban đầu được tính ở phía trên, bên phải, bên dưới và bên trái thành phần

The value of property position

Constructor

  • Thuộc tính vị trí đứng độc lập hoặc kèm theo cặp giá trị định vị (theo chiều ngang và theo chiều thẳng đứng)
  • Vị trí này có thể hiển thị thông qua các thuộc tính vị trí như

    • đứng đầu. side location of the component
    • bên phải. side location of the section must be
    • đáy. set the side position under the component
    • bên trái. định vị trí bên trái của thành phần
  • Những vị trí này có thể sử dụng giá trị dương hay âm đều được

    position : relative;
    top: giá trị;
    left: giá trị;

    position : relative;
    top: giá trị;
    right: giá trị;

    position : relative;
    bottom: giá trị;
    left: giá trị;

    position : relative;
    bottom: giá trị;
    right: giá trị;

Chuẩn bị

Tạo tệp HTML và CSS có cấu trúc thư mục và nội dung như sau

Constructor directory

Click vào dấu [+] để xem cấu trúc

viết HTML





tiêu đề trang web


Thành phần A

Thành phần B




Show the browser when not have CSS

Thành phần A

Thành phần B

Để dễ dàng định vị dung thuộc tính, ta sẽ chọn thành phần

and 2 thành phần

has content as after

CSS

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
    height: 100px;
    margin: 30px 40px;
}

p.tagA {
    background: #f3f3cf;
    height: 30px;
    width: 150px;
}

p.tagB {
    background: #e0e0fc;
    height: 30px;
    width: 150px;
}

Hiện trình duyệt khi chưa sử dụng vị trí

Thành phần A

Thành phần B

Tải xuống phần chuẩn bị

Tới đây ta đã hoàn thành bước chuẩn bị, bắt đầu khám phá thôi

Chức vụ. quan hệ

  • Thuộc tính vị trí. quan hệ;

Add intoThành phần A thuộc tính position. quan hệ;

CSS

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
    height: 100px;
    margin: 30px 40px;
}

p.tagA {
    background: #f3f3cf;
    height: 30px;
    position: relative;
    width: 150px;
}

p.tagB {
    background: #e0e0fc;
    height: 30px;
    width: 150px;
}

Show the browser when used position relative

Thành phần A

Thành phần B

Nhìn vào kết quả ta thấy hình như không có chuyện gì xảy ra, tuy nhiên khi ta sử dụng vị trí. quan hệ;

Partition

Di chuyển hình ảnh lên css

  • ①. root for top properties
  • ②. root for property right
  • ③. root for property bottom
  • ④. root for left property

Để hiểu rõ hơn ta hãy thêm vào Thành Phần A các thuộc tính định vị

CSS

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
    height: 100px;
    margin: 30px 40px;
}

p.tagA {
    background: #f3f3cf;
    height: 30px;
    position: relative;
    top: 40px;
    width: 150px;
}

p.tagB {
    background: #e0e0fc;
    height: 30px;
    width: 150px;
}

Show the browser when used top 40px

Thành phần A

Thành phần B

Partition

Di chuyển hình ảnh lên css

Thành phần A lúc này đã ở vị trí bên dưới cách vị trí ban đầu một khoảng 40px và màn trập lên Thành phần B, kết quả là do khi sử dụng vị trí. relative;, vùng hiển thị của các phần thành phần đã tách khỏi vùng không gian của nó, khi vùng hiển thị này có thể di chuyển ở bất kỳ vị trí nào tùy thuộc vào các thuộc tính định vị, mặc dù gốc của nó được tính theo

Xem thêm một số ví dụ về vị trí khi bổ sung các thuộc tính định vị

Định vị trí vị trí quan hệ thông qua thuộc tính top và left

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
    height: 100px;
    margin: 30px 40px;
}

p.tagA {
    background: #f3f3cf;
    height: 30px;
    position: relative;
    top: 40px;
    left: 50px;
    width: 150px;
}

p.tagB {
    background: #e0e0fc;
    height: 30px;
    width: 150px;
}

Show the browser when used top 40px, left 50px

Thành phần A

Thành phần B

Partition

Di chuyển hình ảnh lên css

Định vị trí vị trí quan hệ thông qua thuộc tính top và right

________số 8

Show the browser when used top 40px, right 40px

Thành phần A

Thành phần B

Partition

Di chuyển hình ảnh lên css

Định vị trí vị trí quan hệ thông qua thuộc tính bottom and left

* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid red;
    height: 100px;
    margin: 30px 40px;
}

p.tagA {
    background: #f3f3cf;
    height: 30px;
    position: relative;
    bottom: 40px;
    left: 50px;
    width: 150px;
}

p.tagB {
    background: #e0e0fc;
    height: 30px;
    width: 150px;
}

Show the browser when used bottom 40px, left 50px

Thành phần A

Thành phần B

Partition

Di chuyển hình ảnh lên css

Định vị trí vị trí quan hệ thông qua thuộc tính bottom và right

    position : relative;
    top: giá trị;
    right: giá trị;
0

Show the browser when used bottom 40px, right 50px

Thành phần A

Thành phần B

Partition

Di chuyển hình ảnh lên css

Chức vụ. tuyệt đối

Thuộc tính vị trí. tuyệt đối;

  • Trường họp 1. Nếu không có thuộc tính định vị (top, right, bottom, left) thì thành phần sẽ lấy gốc theo vùng hiển thị với giá trị mặc định ở trên cùng. 0 và left. 0

CSS

    position : relative;
    top: giá trị;
    right: giá trị;
1

Show the browser when used position. tuyệt đối;

Thành phần A

Thành phần B

Ta thấy Thành phần A lúc này vẫn nằm ở vị trí như ban đầu, tuy nhiên vùng không gian của nó đã được giải nén và Thành phần A đã thoát khỏi vùng không gian của nó, chính vì vậy mà Thành phần B đã sử dụng

CSS

    position : relative;
    top: giá trị;
    right: giá trị;
2

Show the browser

Thành phần A

Thành phần B

  • Trường họp 2. Nếu có sử dụng các thuộc tính định vị, thì thành phần sẽ lấy gốc theo vùng không gian của trình duyệt đây cũng chính là vùng văn bản HTML

CSS

    position : relative;
    top: giá trị;
    right: giá trị;
3

View browser display

Partition

Di chuyển hình ảnh lên css

  • Trường hợp 3. If have an other section in outside the position. relative;) thì gốc của nó (thành phần sử dụng thuộc tính position. tuyệt đối;) sẽ được tính theo vùng hiển thị của thành phần bao bên ngoài nó

Xem ví dụ sau để hiểu rõ hơn. thêm thuộc tính position. quan hệ;

ta có

CSS

    position : relative;
    top: giá trị;
    right: giá trị;
4

Show the browser when used position. quan hệ; . tuyệt đối;

Thành phần A

Thành phần B

Khi sử dụng vị trí. quan hệ;

và sử dụng vị trí. tuyệt đối;

, mối liên hệ này giống như người thả diều (thành phần

) và con diều hâu (Thành phần A), Thành phần B lúc này nằm bên dưới Thành phần A do nó chiếm vị trí không gian của Thành phần A

Thêm thuộc tính định vị trí để hiểu rõ hơn thuộc tính vị trí. tuyệt đối;

Định vị trí định vị. tuyệt đối;

    position : relative;
    top: giá trị;
    right: giá trị;
5

Show the browser when used top 20px, left 30px

Thành phần A

Thành phần B

Partition

Di chuyển hình ảnh lên css

Định vị trí định vị. tuyệt đối;

    position : relative;
    top: giá trị;
    right: giá trị;
6

Show the browser when used top 20px, right 30px

Thành phần A

Thành phần B

Partition

Di chuyển hình ảnh lên css

Định vị trí định vị. tuyệt đối;

    position : relative;
    top: giá trị;
    right: giá trị;
7

Show the browser when used bottom 20px, left 30px

Thành phần A

Thành phần B

Partition

Di chuyển hình ảnh lên css

Định vị trí định vị. tuyệt đối;

    position : relative;
    top: giá trị;
    right: giá trị;
8

Show the browser when used bottom 20px, right 30px

Thành phần A

Thành phần B

Partition

Di chuyển hình ảnh lên css

Chức vụ. đã sửa

Thuộc tính vị trí. đã sửa;

CSS

    position : relative;
    top: giá trị;
    right: giá trị;
9

View browser display

Chức vụ. tĩnh

Đây là định dạng định dạng vị trí của thành phần, thường được sử dụng để phục hồi định dạng vị trí cho thành phần