-1
私がスクロールすると、画像は固定位置のタイトルの上に表示されます。どうして？スクロール（CSS）するときに画像がタイトルの上に表示されるのはなぜですか？
<html>
<head>
<title></title>
<style>
* {
padding:0;
margin:0;
font-family:"Playfair Display";
}
</style>
</head>
<body>
<!-- Menu -->
<div style="overflow:hidden;background-color:gray;position:fixed;padding:1% 2% 1% 2%;width:96%;box-shadow:0 3px 7px black;">
<a style="float:left;background-color:green;padding:10px 15px 10px 15px;">Gourmet au Catering</a>
<div style="float:right;">
<a style="float:left;background-color:green;padding:10px 15px 10px 15px;">About</a>
<a style="float:left;background-color:white;padding:10px 15px 10px 15px;">Menu</a>
<a style="float:left;background-color:red;padding:10px 15px 10px 15px;">Contact</a>
</div> \t
</div>
<!-- slid -->
<div style="">
<img src="https://www.w3schools.com/w3images/hamburger.jpg" style="width:100%;height:auto;"/>
<div style="position:absolute;margin:-70px 25px;font-size:36px;color:gray;letter-spacing:6px;">Le Catering
</div>
<!-- artical -->
<div style="margin:70px 25px 70px 25px;">
<img src="https://www.w3schools.com/w3images/tablesetting2.jpg" style="border-radius:5px;width:47%;height:auto;opacity: 0.7;"/>
<div style="float:right;width:48%;">
<h1 style="text-align:center;letter-spacing:5px;font-size:30px;margin:25px 0 50px 0;">About Catering</h1>
<div style="text-align:center;font-size:20px;letter-spacing:5px;margin-bottom:20px;">Tradition since 1889</div>
<p style="font-size:18px;line-height: 28px;">
The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur
adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.We only use <span>seasonal</span> ingredients.<br><span>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
\t </div>
</div>
<hr>
<div style="clear:both;margin:;">
<img src="3.jpg"/>
<h1>Our Menu</h1>
<h3>Bread Basket</h3>
<p>Assortment of fresh baked fruit breads and muffins 5.50</p>
<h3>Honey Almond Granola with Fruits</h3>
<p>Natural cereal of honey toasted oats, raisins, almonds and dates 7.00</p>
<h3>Belgian Waffle</h3>
<p>Vanilla flavored batter with malted flour 7.50</p>
<h3>Scrambled eggs</h3>
<p>Scrambled eggs, roasted red pepper and garlic, with green onions 7.50</p>
<h3>Blueberry Pancakes</h3>
<p>With syrup, butter and lots of berries 8.50</p>
<hr>
</div>
<div>
<h1>Contact</h1>
<p>We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste. Do not hesitate to contact us.<br>
<span>Catering Service, 42nd Living St, 43043 New York, NY</span><br>
You can also contact us by phone 00553123-2323 or email [email protected], or you can send us a message here:
</p>
</div>
<div>
<input type="text" placeholder="Name">
<input type="text" placeholder="How many people">
<input type="text" placeholder="Message \ Special requerements">
<input type="submit" value="send message"/>
</div>
<footer>Powred by w3.css</footer>
</body>
</html>
あなたのHTMLとCSSを入力してください。何が起こっているのか理解できるようにしてください。 –
js fiddleにコードを投稿して、ここにリンクしてください。 –
OK idon't eveerがhtmlコードを投稿する方法を知っているので、ちょっと待ってください –