Sometimes when we design a web page, we want the content that users are interested in to be displayed first , I don't want to change the sequence of the code , How to operate ?( Or to put it another way : In the source code, you should first see A See again B, And visually it's first B Again A) A simple example , I want the content of the second line to be visually displayed on the first line without changing the code . Pictured , The picture on the left is normal , I want them to change order , Show it like the picture on the right .

 

We can go through div+css To define

css in position Of absolute( absolute ) and relative( relative ) Two parameters , Let's take the picture on the right above css It is defined as follows :

.bock1 { width:300px; height:100px; background:#ffcccc;position:relative; margin-top:100px;}
.bock2 { width:300px; height:100px; background:#65b6be;position:absolute;top:0;}

preservation , Try refreshing the page , Is it the effect you want to see ?

How to use css Control content display order The second line gives priority to more related articles

  1. stay Linux Of Terminal Displays the contents of a specific line in the text file

    Suppose the file name of the text file to be manipulated is textFile What we want to do now is to directly extract and output the content of the specified line of the specified text file in the terminal without opening the file in edit mode Extract the content of the specified line of the specified text file at the terminal Tool Comma ...

  2. Linux View the first few lines and the last few lines of a large file on the

    head -n 50 filePath View the beginning 50 The content of the line tail -n 50 filePath Look at the end of the file 50 The content of the line

  3. css Control two tables on the same page , A border line is displayed , The other one has no border

    Not displaying borders :<table border="0" cellspacing="0"  cellpadding="" ><tr ...

  4. css Controls the overflow of single or multiple lines of text to be displayed as an ellipsis ...

    p:first-child { background-color: pink; width: 150px; line-height: 28px; font-size: 20px; overflow: ...

  5. CSS Tips - How to make every extra line of text display ellipsis ?

    1.white-space:nowrap If it's in Chinese , You need to set the end of the line to continue the line 2.overflow:hidden Set hide out of control scope 3.text-overflow:ellipsis

  6. html div When the second line of text can't be displayed, use the ellipsis instead of css Realization

    Sometimes there are too many words , But for the sake of beauty, I want to display the ellipsis on the second line , Instead of the ellipsis on the first line Here is css Code : overflow:hidden;text-overflow: ellipsis;// Show ...

  7. CSS Control the display of long text content ( Use an ellipsis instead of )

    Automatic line feed problem , It is reasonable to wrap normal characters , And continuous numbers and English characters often stretch the container , What follows is CSS How to implement the processing method . In reality, some texts with relatively long contents often appear , In order to make the overall layout beautiful , You need to keep the text on one line ...

  8. CSS control XML And through js analysis xml And then through html Show xml Data in

    Use CSS control XML Display of book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...

  9. css Control the problem of automatic line feed of English content

    css Control English content to wrap automatically HTML: <!-- Because the content to be displayed is through CMS Add to database , Then grab out the front desk display , So you can't Control the length of each line . So I'm showing the content div Set up a ...

Random recommendation

  1. The finger of the sword Offer Interview questions :30. The first character that appears only once

    One . subject : The first character that appears only once subject : Find the first character in the string that appears only once . Such as the input "abaccdeff", The output 'b'. The required time complexity is O(n). The most intuitive idea is to scan this from scratch ...

  2. master Ajax, The first 2 part : Use JavaScript and Ajax Make asynchronous request

    turn http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ master Ajax, The first 2 part : Use JavaScript and Ajax Make asynchronous request ...

  3. python function hadoop 2.0 mapreduce Program

    The main points of :#!/usr/bin/python Because it's going to be sent to each node , therefore py The file must be executable . 1) Statistics ( All logs ) Independent ip number , Namely different ip Total of #################### Local testing ## ...

  4. Spinner( fine-tuning ) Components

    This lesson focuses on EasyUI in Spinner( fine-tuning ) How to use components , This component depends on ValidateBox( Verification box ) Components . One . Loading mode Spinner( fine-tuning ) Component is the basic component of the other two advanced fine tuning components , ...

  5. Tomcat Startup Report ClassNotFoundException error , solve

    Today, I put a Maven Managed web project Update after , start-up Tomcat(Eclipse in ) System error reporting . Error message  java.lang.ClassNotFoundException: , Display is spring Of C ...

  6. KSImageNamed-Xcode

    KSImageNamed-Xcode   Awesome. XCODE Image browsing plug in ; What is this? Can't remember whether that image you just add ...

  7. About VRTK Use ( One )—— VR Development environment construction

    First, in the Hierarchy Add... To the window GameEmpty, And rename to VRTK. And then to VRTK Add a sub container named SteamVR. from Asset Store Import SteamVR Plugin: Then select prefabrication ...

  8. SqlSever Database practice week

    Download resources For a period of 5 The database design of the day , I've used databases before , But this time it's a database designed using the standard design process in the book , I feel it necessary to record it , I hope it helps others . My harvest : My harvest will be reflected in this blog , For the ...

  9. Beta sprint NO.2

    Beta sprint the second day 1. Yesterday's problem There are a lot of problems left by the sprint ahead , And the chaotic code brings us great difficulties in the next improvement work . 2. The progress of today's solution Pan Weijing : 1. The code is modified review 2. Add to the system ...

  10. Java Garbage collection mechanisms and annotations