CSSで後から書いたほうだけが反映される

前提・実現したいこと

HTML,CSS,Javascriptを使って、画像の抽選(ガチャ)をするプログラムを作りました。
CSSによって「表示される画像のサイズ」と「ボタンの位置」を指定しています。

発生している問題・エラーメッセージ

CSSが指定する二つの命令のうち、後から書いたほうしか反映されません。
「#gachaHatena｛｝」、「#gachaButton{}」の順に書くと画像は「#gachaHatena{}」で指定したはずのサイズにならず、
「#gachaButton{}」、「#gachaHatena{}」の順に書くとボタンは「#gachaButton{}」で指定したはずの位置になりません。

該当のソースコード

HTMLはこちらです。

HTML
1<html>
2
3
4	<head>
5		<meta charset="UTF-8">
6		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7		<link rel="stylesheet" type="text/css" href="gachaTest.css">
8		<script type="text/javascript" src="gacha.js"></script>
9
10	</head>
11	
12
13	<body>
14		<!--ガチャを回す前に表示される画像-->
15		<img id="gachaHatena" src="./gacha.png"><br>
16		<!--ボタンを押すと画像の抽選がされる-->
17		<button id="gachaButton">ガチャを回す</button>
18
19	</body>
20
21
22</html>

CSSはこちらです。

CSS
1@charset "UTF-8"
2
3/*画像のサイズ*/
4#gachaHatena {
5	width: 400px;
6	height: 500px;
7}
8
9/*ボタンの位置*/
10#gachaButton{
11	position: absolute;
12	top :100px;
13	left: 500px;
14}

JavaScriptはこちらです。

JavaScript
1$().ready(function(){
2	$('button').on('click',changeGacha);
3});
4
5changeGacha = function(){
6	var gachaResult = rand(1,100);
7	/*5%で大当たり画像に差し替え*/
8	if(gachaResult <= 5){
9		$('#gachaHatena').attr('src', './atariUL.png');
10	}
11	/*8%で当たり画像に差し替え*/
12	else if(5 < gachaResult && gachaResult <= 13){
13		$('#gachaHatena').attr('src', './atariN.png');
14	}
15	/*残りの割合ではずれ画像に差し替え*/
16	else{
17		$('#gachaHatena').attr('src', './suka.png');
18	}
19};
20
21
22/*minからmaxまでの間からランダムな値を返す関数*/
23rand = function(min,max){
24	return Math.floor(Math.random()*(max - min)+min);
25};
26
27