Cách làm cho hình ảnh không bị trùng lặp trong html

Tiêu đề và neo cố định có thể gây ra sự cố khi chúng được sử dụng cùng nhau. Nhưng bạn có thể giải quyết vấn đề này bằng một chút CSS

Trong ví dụ sau, chúng ta có một

với một lớp "chính" và thêm một thẻ có hai thẻ bên trong nó. Chúng tôi đặt vị trí của

thành "tương đối" và chỉ định màu nền và chiều rộng. Sau đó, chúng tôi tạo kiểu cho lớp "chính" bằng cách chỉ định chiều cao của nó và đặt tràn thành "ẩn" và tràn-y thành "cuộn"

Sau đó, bạn cần đặt vị trí của

thành "đã sửa" và chỉ định thuộc tính chỉ mục z. Đặt hiển thị các thẻ của theto "inline-block" và thêm phần đệm. Việc hiển thị lớp "neo" của thẻ trong phần tử cũng phải được đặt thành "khối nội tuyến", cũng như bạn cần đặt phần đệm trên cùng

  
    Title of the document
    
  
  
    

      
        Learn HTML
        Learn GIT
      
      
        Anchor link
      
      

        In the HTML Basics section, you will have a full understanding of Editors and Tools that you need when working on building web pages. It will inform you about the professional editors that web developers use for coding. Elements are the fundamentals of HTML. Each HTML document is made of elements, which are defined using tags. HTML Elements teaches you the types of HTML elements. It also highlights the difference between HTML tags and HTML elements that are often confused.
      
      

        HTML Basic Tags are used to structure website content (text, hyperlinks, images, media, etc). Tags only "instruct" browsers how to show the content of the web page. HTML Tags chapter suggests the most frequently used tags in HTML with their examples.
      
      

        HTML Attributes are added to an HTML element to provide additional information about it. Book suggests lots of examples and the list of the most used attributes.
      
      

        HTML Formatting sophisticated chapter lets you explore the categories of formatting tags with a brief description and examples.
      




      

        Websites contain different types of links that take you directly to other pages or allow navigating to a specific part of the page. Find out how you can define hyperlinks in the HTML Links chapter and how to use different attributes with links and how to apply links on the image.
      
    

Trong ví dụ sau, chúng tôi đặt thẻ neo của mình bên trong một

với một lớp "nội dung". Ở đây, chúng tôi chỉ định thuộc tính lề trên lớp "nội dung"

  
    Title of the document
    
  
  
    

      
        Learn HTML
        Learn GIT
      
      

        
          Header
        
        

          In the HTML Basics section, you will have a full understanding of Editors and Tools that you need when working on building web pages. It will inform you about the professional editors that web developers use for coding. Elements are the fundamentals of HTML. Each HTML document is made of elements, which are defined using tags. HTML Elements teaches you the types of HTML elements. It also highlights the difference between HTML tags and HTML elements that are often confused.
        
        

          HTML Basic Tags are used to structure website content (text, hyperlinks, images, media, etc). Tags only "instruct" browsers how to show the content of the web page. HTML Tags chapter suggests the most frequently used tags in HTML with their examples.
        




        

          HTML Attributes are added to an HTML element to provide additional information about it. Book suggests lots of examples and the list of the most used attributes.
        
      

    

Bạn có một trang web, nhưng các hộp div không thẳng hàng. Điều này có thể xảy ra vì nhiều lý do, đặc biệt là khi bạn xem xét các vấn đề về vị trí với div từ trang web này sang trang web khác. Tương tự, các phần tử hộp có thể chồng lên nhau vì một vài lý do, từ lỗi định vị đến sự cố tràn và sự cố nổi đơn giản. Trong hầu hết các trường hợp, thay đổi nhanh chóng và dễ dàng đối với biểu định kiểu trang web của bạn sẽ khắc phục được sự cố

1. 1

   Thêm lề nếu các hộp hiện không có lề và chỉ chồng lên nhau một lượng nhỏ. Bạn có thể đặt lề chỉ ở một bên, chẳng hạn như bên trái, nếu bạn chỉ muốn sử dụng phần tử lề để đẩy phần tử hộp khác ra xa. Chẳng hạn, nếu div A và div B được đặt cạnh nhau và div B chồng lên nhau ở phía bên trái, bạn có thể sửa đổi biểu định kiểu của mình để thêm lề trái vào div A như sau

   một { chiều rộng. 100px; . 10px;

2. 2

   Tìm kiếm biểu định kiểu của bạn để biết các giá trị định vị có thể gây chồng chéo và thay đổi chúng. Nếu bạn đang sử dụng định vị tuyệt đối để sắp xếp các phần tử div của trang web, thì đó là cách miễn phí cho tất cả – bất kỳ phần tử nào cũng có thể chồng lên bất kỳ phần tử nào khác trên trang. Vì vậy, nếu bạn đặt div A rộng 100 pixel và 15 pixel từ trên cùng và bên trái của trang, thì div B sẽ cần phải cách ít nhất 115 pixel về bên trái để không chồng lên div A. Bạn có thể chỉ định vị trí từ trên cùng hoặc dưới cùng và từ bên phải hoặc bên trái

3. 3

   Đặt div có chiều rộng cụ thể và ẩn phần tràn. Điều này ngăn div vượt quá kích thước đã chỉ định và ngăn nội dung tràn ra ngoài, có thể nói như vậy. Ví dụ: nếu div A không có chiều rộng đã đặt và bạn đặt một hình ảnh lớn vào đó, div sẽ tự động mở rộng để chứa hình ảnh. Nếu bạn đặt chiều rộng, hình ảnh sẽ vẫn hiển thị bên ngoài các cạnh của div, nhưng div sẽ không mở rộng. Nếu bạn ẩn phần tràn, hình ảnh sẽ chỉ hiển thị trong ranh giới của div và sẽ không mở rộng phần tử. Chẳng hạn, để đặt div A rộng 200 pixel và không bị tràn, bạn sẽ sử dụng mã kiểu này

   một { chiều rộng. 200px; . ẩn giấu;

4. 4

   Sử dụng tùy chọn "float" để tự động xếp các hộp div cạnh nhau. Chẳng hạn, bạn muốn div A hoạt động như một thanh bên và div B để giữ nội dung của bạn – bạn có thể di chuyển cả hai div sang trái, do đó làm cho chúng căn chỉnh theo chiều ngang. Các phần tử div nổi sẽ không trùng nhau. Một ví dụ về hai phần tử nổi trông giống như thế này

   Tại sao hình ảnh của tôi chồng lên nhau trong CSS?

   Nếu phần tử được định vị tuyệt đối cao hơn hình ảnh tĩnh (trên cùng) , nội dung sau sẽ chồng lên các hình ảnh. Điều này là do chiều cao của hình ảnh được định vị tuyệt đối không được nhận dạng do nó nằm ngoài luồng tài liệu, (một hành vi bình thường đối với phần tử được định vị tuyệt đối).

   Tại sao nội dung của tôi bị chồng chéo trong HTML?

   Lý do cho các dòng chồng lên nhau khá đơn giản. Chiều cao dòng không đủ để chứa kích thước văn bản . Chẳng hạn, bạn đã "mã hóa cứng" kích thước phông chữ thông qua CSS nội tuyến nhưng không điều chỉnh chiều cao dòng.