所以我正在做一个单页的网站，我的问题是下一个：
在我的主页上，我希望从网站上获得标题和2个装饰品，但问题是他们不想留在原地。
我希望第一个位于左上角，第二个位于右下角。我试图用top: 0px;，bottom: 0px;和position: absolute;处理它，但他们不想留在原地。
请帮帮我。
/* RÉGLAGES GÉNÉRAUX */
body {
font-family: 'Roboto', sans-serif;
color: #222222;
background-color: beige;
}
/* RÉGLAGES DES SECTIONS */
section {
height: 100vh;
width: 90%;
overflow: auto;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 50px auto 50px auto;
font-size: 1.5em;
position: relative;
}
.home{
width: 100%;
height: 100%;
position: relative;
}
/* Style des déco */
#3rectangles {
top: 0px;
left: 0px;
position: absolute;
}
#3rectanglesUD {
right: 0px;
bottom: 0px;
position: absolute;
}<!DOCTYPE html>
<html>
<head>
<title>Comprendre l'Intelligence Artificielle</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="nav" class="container">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#home" onclick="closeNav()">Accueil</a>
<a href="#iaCestQuoi" onclick="closeNav()">L'IA c'est quoi?</a>
<a href="#iafaible" onclick="closeNav()">L'IA faible</a>
<a href="#iaforte" onclick="closeNav()">L'IA forte</a>
<a href="#iahier" onclick="closeNav()">L'IA d'hier</a>
<a href="#iaauj" onclick="closeNav()">L'IA d'aujourd'hui</a>
<a href="#iademain" onclick="closeNav()">L'IA de demain</a>
<a href="#aPropos" onclick="closeNav()">À propos de nous</a>
<a href="#contact" onclick="closeNav()">Contact</a>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id="openNav">☰</span>
<section id="home">
<div class="home">
<img id="3rectangles" src="https://imgur.com/a/7aSMZis/">
<h1>
Comprendre<br> l'Intelligence
<br> Artificielle
<br>
</h1>
<img id="3rectanglesUD" src="https://imgur.com/a/jiyXKj7/">
</div>
</section>
<section id="iaCestQuoi">
<div>
<h1>
L'intelligence artificelle c'est quoi?
</h1>
<p>
L’ordinateur dépasse déjà l’humain dans les tâches répétitives telles que le calcul ou encore la mémorisation. Mais ce n’est pas de l’intelligence.<br> Jacques Attali définit l’intelligence lors d’une conférence avec le chercheur en intelligence artificielle Jean Ponce “comme la faculté du cerveau humain à faire des liens entre des choses qui n’en avaient apparemment pas”.<br> Les chercheurs en IA veulent développer – artificiellement donc – cette intelligence. Ils cherchent donc le moyen de faire en sortes que les ordinateurs puissent accomplir les mêmes tâches que l’homme et puissent développer une capacité intellectuelle comparable ou supérieure à celle de l’homme.<br> Le but des chercheurs est d’optimiser pour au rentabiliser au mieux les performances de l’algorithme afin qu’il puisse égaler l’humain dans toutes ses capacités intellectuelles jusqu’à même avoir des sentiments. Les algorithmes simples ne font pas partie de l’IA comme le mode conduite automatique de Tesla qui se base sur un GPS et une caméra.<br> L’importance et l’utilité de l’IA ne sont plus à démentir car elles aident déjà beaucoup dans le secteur médical, automobile ou encore l’exploration spatiale et ses petits robots.<br> Cette technologie a déjà largement démontré qu’elle peut surpasser l’humain autant sur le plan physique que sur le plan intelligent.
</p>
</div>
</section>
<section id="iafaible">
<div>
<h1>
IA faible
</h1>
<p>
L’intelligence artificielle faible reproduit le plus fidèlement possible un comportement ou un système de réflexion préprogrammé, mais ne comprend pas son fonctionnement.<br> Le principe de compréhension ne s’effectue pas là car elle imite sa cible.<br> Même si elle paraît intelligente, elle ne fait que lire l’algorithme elle n’est donc intelligente que pour un regard extérieur.<br> L’intelligence artificielle faible n’est pas fait pour évoluer seule par ce n’est qu’un assemblage de programmes et d’algorithmes informatiques qui ne servent qu’à la tâche précise et spécifique pour laquelle ils ont été conçus.
</p>
</div>
</section>
<section id="iaforte">
<div>
<h1>
IA forte
</h1>
<p>
L’IA forte, aussi appelée ascendante, est au contraire de l’IA faible une intelligence au sens plein ; la machine fait preuve d’anticipation, d’adaptation et peut atteindre les capacités intellectuelles humaines.<br> Elle peut non seulement effectuer des actions rationnelles et réfléchies en analysant des situations, mais également être consciente et comprendre ses choix.<br> Actuellement, programmer une conscience semble impossible. Cependant, les chercheurs se penchent déjà dessus et les recherches avancent vitesse grand V.
</p>
</div>
</section>
<section id="iahier">
<div>
<h1>
L'IA d'hier
</h1>
<h2>
Sa naissance
</h2>
<p>
De nombreuses légendes racontent que des êtres artificiels auraient déjà vu le jour, créés par des maîtres artisans et ayant une conscience propre.<br> L’homme a simplement toujours rêvé d’immortalité, peu importe la sorte.<br> Ce qui l’a conduit à divers projets ayant pour but de le copier.<br> Cette méthode lui permettrait d’être maître de l’évolution et de prendre le contrôle de la nature en essayant de tracer sa propre destinée.<br> Les premières machines à calculer apparaissent par exemple dès l’antiquité. Ces inventions, qui ont été perfectionnées au cours des siècles, ont présagé l’existence de technologies accompagnant ou reproduisant les capacités humaines qui tendent à se développer de façon exponentielle aujourd’hui.
</p>
<h2>
De 1950 à nos jours
</h2>
<p>
La première forme de démocratisation de l’intelligence artificielle est lancée par Alan Turing, que l’on considère souvent comme un père de l’I.A., au travers de son article « Computing Machinery and Intelligence » en 1950 qui porte sur les fondamentaux des machines intelligentes.<br> Dans cette avancée d’esprits et de technologies, John McCarthy inventera plus tard la technique du temps partagé, qui permettait aux ordinateurs qui coutaient un bras à l’époque de s’optimiser en effectuant plusieurs tâches simultanées. Il inventa aussi le premier langage de programmation, le LISP, qui fut le langage de référence de l’IA des années 70-80 et qui est encore utilisé sur le web ou en finance.<br> Après de longues années d’espérance à la création d’intelligences artificielles, se suivirent de longues années de désillusions étant donné que les technologies passées n’étaient pas assez puissantes pour en créer de réelles. C’est seulement grâce à internet au début des années 2000 et au partage de connaissance qu’elle offre que le projet put continuer à se développer, ainsi que grâce aux avancées technologiques sur la puissance des ordinateurs. Actuellement on peut retrouver des I.A. partout pour effectuer les tâches les plus simples et répétitives des hommes en les exécutant même mieux grâce à la puissance de calcul et l’efficacité informatique.
</p>
</div>
</section>
<section id="iaauj">
<div>
<h1>
L'IA d'aujourd'hui
</h1>
<p>L’I.A. rentre aujourd’hui dans une phase de croissance exponentielle grâce à l’optimisation et au développement des technologies qui sont de plus en plus rapides. Mais tout cela n’aurait pas eu lieu si vite si de nombreux chercheurs n’auraient pas fait évoluer le sujet théorique des années au par avant. Même les entreprises les plus influentes en ont compris les enjeux et y investissent.
</p>
<h1>Les apps</h1>
<p>L’Intelligence Artificielle est désormais utilisée partout comme dit au-dessus, comme par exemple :</p>
<ul>
<li>Le traitement d’images et de vidéos (reconnaissance d’images)</li>
<li>Le traitement du langage (reconnaissance vocale et Chatbots)</li>
<li>Les analyses prédictives (basées sur une grande base de données)</li>
<li>La programmation des jeux (surtout grâce aux adversaires qui ont un comportement de plus en plus réaliste)</li>
<li>L’automatisation intelligente (développée dans l’industrie)</li>
<li>La conception de robots humanoïdes</li>
<li>La santé et la bio-informatique</li>
<li>L’art où la machine peut concevoir des chefs-d’œuvre</li>
<li>La simulation de systèmes complexes</li>
</ul>
<h1>Les techniques</h1>
<p>L’Intelligence Artificielle se base sur diverses disciplines scientifiques comme par exemple :</p>
<ul>
<li>Les systèmes experts</li>
<li>Le machine learning</li>
<li>Le deeplearning</li>
<li>La résolution de problèmes</li>
<li>Le traitement automatique du langage</li>
</ul>
</div>
</section>
<section id="iademain">
<div>
<h1>
L'IA de demain
</h1>
<p>Aujourd’hui et surtout dans les prochaines années, les programmes intelligents sont et seront en pleine voie d’extension. Les progrès se font surtout dus à une pression économique et politique des états Américains et Chinois.<br> La période de l’avancée technologique dans ce domaine n’en est donc qu’à son début étant donné qu’il nous manque encore des connaissances même si elles seront vites acquises afin de construire de vrais robots humanoïdes ayant leur propre conscience et fonctionnement. Les experts disent que la découverte de cette technologie pousserait toutes les autres à évoluer par un effet boule de neige.<br> L’hypothèse de la technologie qui prend le dessus sur l’humanité et souvent vue et revue par Hollywood comme par exemple dans le film Transendance ou encore I-Robot qui met en avant les 3 lois de la robotique d’Isaac Asimov qui sont :</p><br>
<ol>
<li>Aucun robot ne peut faire de mal à un humain ou le laisser exposé à un danger</li><br>
<li>Tout robot doit obéir aux ordres de l’humain sauf si l’ordre est contraire à la loi n°1</li><br>
<li>Le robot doit protéger son existence sauf si cette protection entraîne une contradiction avec les règles n°1 et n°2</li><br>
</ol>
<p>Le fait qu’une intelligence artificielle s’améliore toute seule semble n’être que fiction comme la fin de l’humanité qui se ferait dominer par cette dernière. Quelles que soient les conjectures, l’IA va avoir une influence considérable sur notre quotidien et va sans nul doute révolutionner la conduite du monde.</p>
</div>
</section>
<section id="aPropos">
<div>
<h1>
À propos de nous
</h1>
</div>
</section>
<section id="contact">
<div>
<h1>
Contact
</h1>
</div>
</section>
</body>
</html>
答案 0 :(得分：1)
我不完全理解你的最终结果，但如果我可能会提出一些小问题。
您可以使用background属性来实现所需的布局，而不是使用两个<img>并将它们用作背景图像。
您可以将多个图像设置为background属性。 您只需要用逗号分隔，对于其他属性则相同。
像这样：background-image: url('first alink') , url('second image link');
要按照您的喜好定位，您可以使用背景位置：
background-position: top left, right bottom;
也可以按照自己喜欢的方式调整大小，也可以只有一个声明，如果你有很多，它会重复显示
/* This */
background-size: 100% 15%;
/* Is equivalent to This */
background-size: 100% 15% , 100% 15%;
并且一如既往地不要忘记不重复
background-repeat: no-repeat;
/* RÉGLAGES GÉNÉRAUX */
/* You Might wanna add this, to remove unwanted white space. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
color: #222222;
background-color: beige;
}
/* RÉGLAGES DES SECTIONS */
section {
height: 100vh;
width: 90%;
overflow: auto;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 50px auto 50px auto;
font-size: 1.5em;
position: relative;
}
.home {
width: 100%;
height: 100%;
position: relative;
background-image: url(https://i.imgur.com/qpP5rKO.png), url(https://i.imgur.com/qUGXcWz.png);
background-position: top left, right bottom;
background-size: 100% 15%;
background-repeat: no-repeat;
}<section id="home">
<div class="home">
<h1>
Comprendre<br> l'Intelligence
<br> Artificielle
<br>
</h1>
</div>
</section>
答案 1 :(得分：0)
您无法使用数字启动ID，因此您不会应用您编写的样式。因此，将元素重命名为three-rectangles
/* RÉGLAGES GÉNÉRAUX */
body {
font-family: 'Roboto', sans-serif;
color: #222222;
background-color: beige;
}
/* RÉGLAGES DES SECTIONS */
section {
height: 100vh;
width: 90%;
overflow: auto;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 50px auto 50px auto;
font-size: 1.5em;
position: relative;
}
.home{
width: 100%;
height: 100%;
position: relative;
}
/* Style des déco */
#three-rectangles {
top: 0px;
left: 0px;
position: absolute;
}
#three-rectanglesUD {
right: 0px;
bottom: 0px;
position: absolute;
}<!DOCTYPE html>
<html>
<head>
<title>Comprendre l'Intelligence Artificielle</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="nav" class="container">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#home" onclick="closeNav()">Accueil</a>
<a href="#iaCestQuoi" onclick="closeNav()">L'IA c'est quoi?</a>
<a href="#iafaible" onclick="closeNav()">L'IA faible</a>
<a href="#iaforte" onclick="closeNav()">L'IA forte</a>
<a href="#iahier" onclick="closeNav()">L'IA d'hier</a>
<a href="#iaauj" onclick="closeNav()">L'IA d'aujourd'hui</a>
<a href="#iademain" onclick="closeNav()">L'IA de demain</a>
<a href="#aPropos" onclick="closeNav()">À propos de nous</a>
<a href="#contact" onclick="closeNav()">Contact</a>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id="openNav">☰</span>
<section id="home">
<div class="home">
<img id="three-rectangles" src="https://imgur.com/a/7aSMZis/">
<h1>
Comprendre<br> l'Intelligence
<br> Artificielle
<br>
</h1>
<img id="three-rectanglesUD" src="https://imgur.com/a/jiyXKj7/">
</div>
</section>
<section id="iaCestQuoi">
<div>
<h1>
L'intelligence artificelle c'est quoi?
</h1>
<p>
L’ordinateur dépasse déjà l’humain dans les tâches répétitives telles que le calcul ou encore la mémorisation. Mais ce n’est pas de l’intelligence.<br> Jacques Attali définit l’intelligence lors d’une conférence avec le chercheur en intelligence artificielle Jean Ponce “comme la faculté du cerveau humain à faire des liens entre des choses qui n’en avaient apparemment pas”.<br> Les chercheurs en IA veulent développer – artificiellement donc – cette intelligence. Ils cherchent donc le moyen de faire en sortes que les ordinateurs puissent accomplir les mêmes tâches que l’homme et puissent développer une capacité intellectuelle comparable ou supérieure à celle de l’homme.<br> Le but des chercheurs est d’optimiser pour au rentabiliser au mieux les performances de l’algorithme afin qu’il puisse égaler l’humain dans toutes ses capacités intellectuelles jusqu’à même avoir des sentiments. Les algorithmes simples ne font pas partie de l’IA comme le mode conduite automatique de Tesla qui se base sur un GPS et une caméra.<br> L’importance et l’utilité de l’IA ne sont plus à démentir car elles aident déjà beaucoup dans le secteur médical, automobile ou encore l’exploration spatiale et ses petits robots.<br> Cette technologie a déjà largement démontré qu’elle peut surpasser l’humain autant sur le plan physique que sur le plan intelligent.
</p>
</div>
</section>
<section id="iafaible">
<div>
<h1>
IA faible
</h1>
<p>
L’intelligence artificielle faible reproduit le plus fidèlement possible un comportement ou un système de réflexion préprogrammé, mais ne comprend pas son fonctionnement.<br> Le principe de compréhension ne s’effectue pas là car elle imite sa cible.<br> Même si elle paraît intelligente, elle ne fait que lire l’algorithme elle n’est donc intelligente que pour un regard extérieur.<br> L’intelligence artificielle faible n’est pas fait pour évoluer seule par ce n’est qu’un assemblage de programmes et d’algorithmes informatiques qui ne servent qu’à la tâche précise et spécifique pour laquelle ils ont été conçus.
</p>
</div>
</section>
<section id="iaforte">
<div>
<h1>
IA forte
</h1>
<p>
L’IA forte, aussi appelée ascendante, est au contraire de l’IA faible une intelligence au sens plein ; la machine fait preuve d’anticipation, d’adaptation et peut atteindre les capacités intellectuelles humaines.<br> Elle peut non seulement effectuer des actions rationnelles et réfléchies en analysant des situations, mais également être consciente et comprendre ses choix.<br> Actuellement, programmer une conscience semble impossible. Cependant, les chercheurs se penchent déjà dessus et les recherches avancent vitesse grand V.
</p>
</div>
</section>
<section id="iahier">
<div>
<h1>
L'IA d'hier
</h1>
<h2>
Sa naissance
</h2>
<p>
De nombreuses légendes racontent que des êtres artificiels auraient déjà vu le jour, créés par des maîtres artisans et ayant une conscience propre.<br> L’homme a simplement toujours rêvé d’immortalité, peu importe la sorte.<br> Ce qui l’a conduit à divers projets ayant pour but de le copier.<br> Cette méthode lui permettrait d’être maître de l’évolution et de prendre le contrôle de la nature en essayant de tracer sa propre destinée.<br> Les premières machines à calculer apparaissent par exemple dès l’antiquité. Ces inventions, qui ont été perfectionnées au cours des siècles, ont présagé l’existence de technologies accompagnant ou reproduisant les capacités humaines qui tendent à se développer de façon exponentielle aujourd’hui.
</p>
<h2>
De 1950 à nos jours
</h2>
<p>
La première forme de démocratisation de l’intelligence artificielle est lancée par Alan Turing, que l’on considère souvent comme un père de l’I.A., au travers de son article « Computing Machinery and Intelligence » en 1950 qui porte sur les fondamentaux des machines intelligentes.<br> Dans cette avancée d’esprits et de technologies, John McCarthy inventera plus tard la technique du temps partagé, qui permettait aux ordinateurs qui coutaient un bras à l’époque de s’optimiser en effectuant plusieurs tâches simultanées. Il inventa aussi le premier langage de programmation, le LISP, qui fut le langage de référence de l’IA des années 70-80 et qui est encore utilisé sur le web ou en finance.<br> Après de longues années d’espérance à la création d’intelligences artificielles, se suivirent de longues années de désillusions étant donné que les technologies passées n’étaient pas assez puissantes pour en créer de réelles. C’est seulement grâce à internet au début des années 2000 et au partage de connaissance qu’elle offre que le projet put continuer à se développer, ainsi que grâce aux avancées technologiques sur la puissance des ordinateurs. Actuellement on peut retrouver des I.A. partout pour effectuer les tâches les plus simples et répétitives des hommes en les exécutant même mieux grâce à la puissance de calcul et l’efficacité informatique.
</p>
</div>
</section>
<section id="iaauj">
<div>
<h1>
L'IA d'aujourd'hui
</h1>
<p>L’I.A. rentre aujourd’hui dans une phase de croissance exponentielle grâce à l’optimisation et au développement des technologies qui sont de plus en plus rapides. Mais tout cela n’aurait pas eu lieu si vite si de nombreux chercheurs n’auraient pas fait évoluer le sujet théorique des années au par avant. Même les entreprises les plus influentes en ont compris les enjeux et y investissent.
</p>
<h1>Les apps</h1>
<p>L’Intelligence Artificielle est désormais utilisée partout comme dit au-dessus, comme par exemple :</p>
<ul>
<li>Le traitement d’images et de vidéos (reconnaissance d’images)</li>
<li>Le traitement du langage (reconnaissance vocale et Chatbots)</li>
<li>Les analyses prédictives (basées sur une grande base de données)</li>
<li>La programmation des jeux (surtout grâce aux adversaires qui ont un comportement de plus en plus réaliste)</li>
<li>L’automatisation intelligente (développée dans l’industrie)</li>
<li>La conception de robots humanoïdes</li>
<li>La santé et la bio-informatique</li>
<li>L’art où la machine peut concevoir des chefs-d’œuvre</li>
<li>La simulation de systèmes complexes</li>
</ul>
<h1>Les techniques</h1>
<p>L’Intelligence Artificielle se base sur diverses disciplines scientifiques comme par exemple :</p>
<ul>
<li>Les systèmes experts</li>
<li>Le machine learning</li>
<li>Le deeplearning</li>
<li>La résolution de problèmes</li>
<li>Le traitement automatique du langage</li>
</ul>
</div>
</section>
<section id="iademain">
<div>
<h1>
L'IA de demain
</h1>
<p>Aujourd’hui et surtout dans les prochaines années, les programmes intelligents sont et seront en pleine voie d’extension. Les progrès se font surtout dus à une pression économique et politique des états Américains et Chinois.<br> La période de l’avancée technologique dans ce domaine n’en est donc qu’à son début étant donné qu’il nous manque encore des connaissances même si elles seront vites acquises afin de construire de vrais robots humanoïdes ayant leur propre conscience et fonctionnement. Les experts disent que la découverte de cette technologie pousserait toutes les autres à évoluer par un effet boule de neige.<br> L’hypothèse de la technologie qui prend le dessus sur l’humanité et souvent vue et revue par Hollywood comme par exemple dans le film Transendance ou encore I-Robot qui met en avant les 3 lois de la robotique d’Isaac Asimov qui sont :</p><br>
<ol>
<li>Aucun robot ne peut faire de mal à un humain ou le laisser exposé à un danger</li><br>
<li>Tout robot doit obéir aux ordres de l’humain sauf si l’ordre est contraire à la loi n°1</li><br>
<li>Le robot doit protéger son existence sauf si cette protection entraîne une contradiction avec les règles n°1 et n°2</li><br>
</ol>
<p>Le fait qu’une intelligence artificielle s’améliore toute seule semble n’être que fiction comme la fin de l’humanité qui se ferait dominer par cette dernière. Quelles que soient les conjectures, l’IA va avoir une influence considérable sur notre quotidien et va sans nul doute révolutionner la conduite du monde.</p>
</div>
</section>
<section id="aPropos">
<div>
<h1>
À propos de nous
</h1>
</div>
</section>
<section id="contact">
<div>
<h1>
Contact
</h1>
</div>
</section>
</body>
</html>
答案 2 :(得分：0)
这样做的简单方法是将其添加到CSS元素中。
<style>
Position: absolute;
Top: 0px;
Left: 0px;
</style>
将其锁定在左上角。
这样就可以随心所欲地移动。
<style>
Transform: Translate(1px, 1px);
</style>
您只需更改Transform: Translate(1px, 1px);
使其适合您的代码。我建议使用vw / vh格式（视口宽度和视口高度，视口是监视器，如果需要，这将使其非常可扩展）